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

点击时将道具传递给子组件

1 个答案: