Javascript 反应-如何处理不同组件中输入的表单提交？

我在ReactJS项目中有一个表单，它分为不同的组件，主组件导入所有子组件（有输入框），然后还有提交按钮：

如何使所有组件同步，以便在单击enter或submit时，从主组件的状态中获取内部所有组件的输入？我已经对它们实施了提交，但我无法让它们同时提交

我还尝试使用HTML5标记“form”和“id”来组合不同的组件输入，但我没能做到

class MainFormElement extends Component {
  constructor(props) {
    super(props);

    this.state = {
      input1data: "",
      input2data: "",
      input3data: "",
      ///...
    };
  }

  render() {
    return (
      <div>
        <ComponentWithInput1 />
        <ComponentWithInput2 />
        <ComponentWithInput3 />
        <button type="submit" form="mainForm">
          submit
        </button>
      </div>
    );
  }
}

class MainFormElement扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入1数据：“”，
input2data:“”，
输入数据：“”，
///...
};
}
render（）{
返回(
提交
);
}
}

假设您已经在用其他组件更新您的状态“input1Data，input2Data…”，那么您需要自己的SubmitHandler函数

class MainFormElement扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入1数据：“”，
input2data:“”，
输入数据：“”，
///...
};
}
onSubmitHandler（单击事件）{
常量{input1data，input2data，input3data}=this.state
常量有效负载=[input1data，input2data，input3，data]
剂量计（有效载荷）
}
render（）{
返回(
提交
);
}
}

当我单击submit按钮时，我的问题主要是用所有子组件输入更新主组件状态（这也是它们的状态），但是看到您的代码，在这种情况下，它的行为并不是正常的。我能够在每个组件中的onChange（）方法中将所有组件的状态传递给主组件，不确定效率有多高，感觉真的很粗糙，但我认为将状态传递给主组件是正确的做法！您可以将自己的onChange处理程序传递给子组件，在组件内部只需调用“this.props.onChange（）”，它的工作原理也是一样的。如果使用此方法，则子输入组件应该没有状态，而是作为道具从MainFormElement传递其值