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>

this.submitHandler（）}
>
提交

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

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

类ParentComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 数据：{}//表单数据 } } onChangeHandlerFn=（数据）=>{ //更新状态； this.setState（{data}） } submitHandler=（）=>{ //你的处理函数 从州发布数据（数据） } render（）{ 返回( 提交 ); } } 如果子组件中发生任何更改，则应调用处理程序函数onChangeHandlerFn={this.onChangeHandlerFn}，intern将更新父组件的状态

希望这有帮助

使用React和named

输入

字段

类ParentComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.form=React.createRef（）；//{ const form=this.form.current 警报（`sameday:${form['sameday'].value}，国际：${form['international'].value}`） } 渲染（）{ 返回(

---

//@Tarun，正如您所提到的，您正在使用

redux

，然后您可以创建一个

reducer

，其中

状态

包含所有字段名称，如：

 const formState = {
    name: null,
    age: 4,
    address: null
};

---

对于每个

input

如

textfield、textarea、checkbox

附加一个

onchange

事件，该事件通过分派操作更改formState的状态。

这取决于具体情况。您是否实现了状态？仅供参考：您可以使用

onClick={this.submitHandler}

而不是

onClick={（）=>this.submitHandler（）}

您是否使用和库来维护状态，如redux？@sSDYes我正在使用redux谢谢您的帮助。即使我的项目中有redux，但我更喜欢这种方式。嘿，我是新反应。我也有同样的问题。您能详细说明解决方案吗？@TarunNagpal@JosephI知道这是一种很好的方法，但相比之下，它需要额外的代码行“在子组件中传递一个处理函数”。您认为如何？或者您可以在单击提交按钮@TarunNagpal时显示单个操作，但通过使用上述方法，您可以在用户输入数据时实现验证。

 const formState = {
    name: null,
    age: 4,
    address: null
};