点击时将道具传递给子组件(pass props to child component on click)
我想在提交按钮的handlesubmitclick props传递给我的子组件(tabs)。 我是怎么做到的?
import React, { Component } from 'react' import Tabs from './tabs' import {connect} from 'react-redux' import {createParking, securedandparkingtype, numberofspaces, schedule} from '../../../store/actions/wizard' import {bindActionCreators} from 'redux' import Formsy from 'formsy-react' class PlaceContainer extends Component { handleSubmit(data) { const componentKey = this.props.children.props.location.pathname.split('/')[3] if (componentKey === 'location') { this.props.createParking(data) } else if (componentKey === 'secured') { this.props.securedandparkingtype(data) } else if (componentKey === 'spaces') { this.props.numberofspaces(data) } else if (componentKey === 'schedule') { this.props.schedule(data) } } render() { return ( <div className="row clearfix"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div className="card"> <div className="header"> <h2>MANAGE PARKING PLACE</h2> </div> <div className="body"> <div className="row"> <Tabs/> <Formsy.Form onSubmit={this.handleSubmit.bind(this)}> {this.props.children} <input type="submit" className="btn btn-primary"/> </Formsy.Form> </div> </div> </div> </div> </div> ) } } export default PlaceContainerI want to pass props to my child component (tabs) on handlesubmitclick of submit button. How i do that ?
import React, { Component } from 'react' import Tabs from './tabs' import {connect} from 'react-redux' import {createParking, securedandparkingtype, numberofspaces, schedule} from '../../../store/actions/wizard' import {bindActionCreators} from 'redux' import Formsy from 'formsy-react' class PlaceContainer extends Component { handleSubmit(data) { const componentKey = this.props.children.props.location.pathname.split('/')[3] if (componentKey === 'location') { this.props.createParking(data) } else if (componentKey === 'secured') { this.props.securedandparkingtype(data) } else if (componentKey === 'spaces') { this.props.numberofspaces(data) } else if (componentKey === 'schedule') { this.props.schedule(data) } } render() { return ( <div className="row clearfix"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div className="card"> <div className="header"> <h2>MANAGE PARKING PLACE</h2> </div> <div className="body"> <div className="row"> <Tabs/> <Formsy.Form onSubmit={this.handleSubmit.bind(this)}> {this.props.children} <input type="submit" className="btn btn-primary"/> </Formsy.Form> </div> </div> </div> </div> </div> ) } } export default PlaceContainer最满意答案
将状态this.state = {myProps: null}到组件中。 将你的状态tabs为道具: <Tabs {...this.state.myProps}单击“提交”按钮时,使用所需的道具更新状态:
this.setState({myProps: this.props})它将使用新道具更新Tabs 。
结果是:
class PlaceContainer extends Component { handleSubmit(data) { this.setState({myProps: this.props}) } constructor(){ this.state={{myProps: null}}; } render() { return ( ... <Tabs {...this.state.myProps}/> ... ); } } Add a state this.state = {myProps: null} to your component. Give tabs your state as props: <Tabs {...this.state.myProps}When clicking on submit button, update the state with the wanted props:
this.setState({myProps: this.props})it will update Tabs with new props.
As a result:
class PlaceContainer extends Component { handleSubmit(data) { this.setState({myProps: this.props}) } constructor(){ this.state={{myProps: null}}; } render() { return ( ... <Tabs {...this.state.myProps}/> ... ); } }更多推荐
发布评论