クリック時に子コンポーネントに小道具を渡す

Question

propsを送信ボタンのhandlesubmitclickにある子コンポーネント（タブ）に渡したいとします。 どうすればいいですか？

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 

Answer 1

• コンポーネントの状態this.state = {myProps: null}を追加します。
• 小道具としてtabsあなたの状態を与える：<Tabs {...this.state.myProps}

送信ボタンをクリックすると、希望の小道具で状態を更新します。それは新しい小道具でTabsを更新します

this.setState({myProps: this.props}) 

。

結果：

class PlaceContainer extends Component { 
     handleSubmit(data) { 
      this.setState({myProps: this.props}) 
     } 
     constructor(){ 
      this.state={{myProps: null}}; 
     } 
     render() { 
      return (
       ... 
       <Tabs {...this.state.myProps}/> 
       ... 
      ); 
     } 
    }