如何从多个子组件获取表单值？

Question

我有一个很大的 HTML 表单，它在多个组件中有多个字段。所有这些组件都在一个父组件中。如何提交表单并从所有子组件获取值？<form>  <Col md={6} className="mb-3">     <SameDay />  </Col>  <Col md={6} className="mb-3">     <International />  </Col>  <Col md={6} className="mb-3">     <OutBondTracking/>  </Col>  <Col md={6} className="mb-3">     <FulfilmentOptions />  </Col>  <button    type="button"    className="btn btn-primary mr-2"    onClick={() => this.submitHandler()}  >    Submit  </button></form>

Answer 1

您可以在子组件（子组件）中传递一个处理程序函数，该函数在父组件中的任何更改和更新状态时触发，例如：

class ParentComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      data: {} . // form data

    }

  }

  onChangeHandlerFn = (data) => {

    // update the state;

    this.setState({ data })

  }

  submitHandler = () => {

    // your handler function

     post your data from the state (data)

  }

   render() {

     return (

        <form>

          <Col md={6} className="mb-3">

                       <SameDay />

                    </Col>

                    <Col md={6} className="mb-3">

                        <International onChangeHandlerFn={this.onChangeHandlerFn}/>

                    </Col>

                    <Col md={6} className="mb-3">

                        <OutBondTracking onChangeHandlerFn={this.onChangeHandlerFn} />

                    </Col>

                    <Col md={6} className="mb-3">

                        <FulfilmentOptions onChangeHandlerFn={this.onChangeHandlerFn} />

                    </Col>

                  <button type="button" className="btn btn-primary mr-2"  onClick= 

                 {this.submitHandler}>Submit</button>

       </form>

     );

   }

}

处理函数onChangeHandlerFn={this.onChangeHandlerFn}，如果子组件有任何变化，应该调用它，它会更新父组件的状态

Answer 2

正如你提到你使用redux，你可以创建一个reducer与states具有象所有字段名称：

 const formState = {

    name: null,

    age: 4,

    address: null

};

对于每一个input喜欢textfield, textarea, checkbox附加一个onchange事件，它通过分派动作来改变 formState 的状态。