时间戳

首页 > 解决方案 > 如何从多个子组件中获取表单值？

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

问题描述

我有一个大型 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>

标签： javascripthtmlreactjs

解决方案

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

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}，如果子组件发生任何变化，则应该调用它，它会更新父组件的状态

希望这可以帮助 ！！

推荐阅读