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

@Tarun，正如您所提到的，您正在使用redux，然后可以创建reducer的{{1}}，其所有字段的名称都应像这样：

states

对于像const formState = { name: null, age: 4, address: null };这样的每个input，请附加一个textfield, textarea, checkbox事件，该事件通过调度动作来更改formState的状态。

Answer 3

使用React refs并命名为static void Main(string[] args) { var t = Task.Run(() => MyMethod()); } static public async void MyMethod() { //some long running code }字段。

go build -ldflags="-s -w" -o test-go test.go
gcc -static -s -o test-c test.c

PS您必须将在输入字段组件中作为道具传递的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> ); } }标签上。详细了解表单name属性here。

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

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

3 个答案: