React - 如何處理不同組件中輸入的表單提交？

Question

我在 ReactJS 項目中有一個表單，分為各種不同的組件，主組件導入所有子組件（具有輸入框），然后還有提交按鈕：

如何使所有組件同步，所以當我單擊輸入或提交時，我會在主組件的 state 中獲得來自內部所有組件的輸入？ 我已經對它們實施了提交，但我無法讓它們同時提交。

我還嘗試使用 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>
    );
  }
}

Answer 1

假設您已經在使用其他組件<ComponentWithInput1 />更新 state “input1Data, input2Data...”，那么您需要自己的onSubmitHandler function。

 class MainFormElement extends Component { constructor(props) { super(props); this.state = { input1data: "", input2data: "", input3data: "", ///... }; } onSubmitHandler(clickEvent) { const {input1data, input2data, input3data} = this.state const payload = [input1data, input2data, input3,data] doSomething(payload) } render() { return ( <div> <ComponentWithInput1 /> <ComponentWithInput2 /> <ComponentWithInput3 /> <button onClick={this.onSubmitHandler} type="submit" form="mainForm"> submit </button> </div> ); } }

考慮到這不是一個真正的“提交”動作，這是模擬提交，但瀏覽器不會這樣對待它，除非你有類似的東西：

<form><input type="submit"/></form>