点击时将道具传递给子组件(pass props to child component on click)

点击时将道具传递给子组件(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 PlaceContainer

I 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}/> ... ); } }