React.js-如何從多個子組件獲取表單值？

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

使用React ref和命名的input字段。

class ParentComponent extends React.Component {
  constructor (props) {
    super(props);
    this.form = React.createRef(); // <------ Create a Ref
  }

  submitHandler = () => {
   const form = this.form.current
   alert(`sameday: ${form['sameday'].value}, international: ${form['international'].value}`)
  }

  render () {
     return (
        <form ref={this.form}> // <------ Hook the Ref
          <Col md={6} className="mb-3">
             <SameDay name='sameday' /> // <------ Pass 'name' prop
          </Col>
          <Col md={6} className="mb-3">
             <International name='international'/>
          </Col>
          <button onClick={this.submitHandler}>Submit</button>
        </form>
     );
   }
}

PS您必須將在輸入字段組件中作為屬性傳遞的name s作為屬性附加到其各自代碼中使用的<input>標記。 在此處閱讀有關表單name屬性的更多信息。

工作示例： https : //stackblitz.com/edit/react-shtnxj

Answer 3

@Tarun，正如您所提到的，您正在使用redux然后可以創建具有所有字段名稱的states簡reducer ：

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

對於每個input如textfield, textarea, checkbox附加一個onchange事件，該事件通過調度動作來更改formState的狀態。