Javascript 反应处理表单组件

好的，我试着在另一个页面中提交两个不同的表单作为独立的组件 组件，其中我只有一个按钮来提交两个表单的数据。 因此，我很难在页面组件中拥有一个共享状态，我需要在提交时将每个表单组件的整个状态传递给我的页面组件。 有人能为我的用例推荐一个最佳实践吗

render() {
    return (
      <div as={Row} className="container" style={formStyle}>
        <Col>
          <Form onSubmit={this.submitData}>
            <TripForm />
            <PostForm heading="add your first blog entry" />
            <Button variant="dark" type="submit">
              Summing up
            </Button>
          </Form>
        </Col>
      </div>
    );
  }

render（）{
返回(
总结
);
}

在父组件中定义您的状态，并在道具中传递

class PageComponent = {

  state = { } //define your state here

  handleChange = () => {} // define a function that handles changing state

  submitData = () => {
    // in here you can access this.state and then submit form data with that state
  }

render() {
    return (
      <div as={Row} className="container" style={formStyle}>
        <Col>
          <Form onSubmit={this.submitData}>
            <TripForm handleChange={handleChange} someState={someState} />
            <PostForm heading="add your first blog entry" handleChange={handleChange} someState={someState}/>
            <Button variant="dark" type="submit">
              Summing up
            </Button>
          </Form>
        </Col>
      </div>
    );
  }
}

class PageComponent={
state={}//在此处定义您的状态
handleChange=（）=>{}//定义一个处理状态变化的函数
提交数据=（）=>{
//在这里，您可以访问this.state，然后使用该状态提交表单数据
}
render（）{
返回(
总结
);
}
}

---

我还定义了

someState

，您可以将其作为道具传递给子/表单组件。使用

handleChange

在其中设置状态后，它将在父组件中设置状态，并且您可以使用该状态

submitData

我建议对每个字段进行模糊处理，通过将函数作为道具传递到该组件中，然后在单击submit时提交数据，从而获得该表单的完整状态