將點擊道具傳遞給子組件

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}

當點擊提交按鈕，與想要的道具更新狀態：

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