React 处理表单组件

Question

Alright I am trying to submit two different forms as independent components in another page component where I only have one button to submit the data of both forms. So I am struggling to have a shared state in the page component and I need to pass the whole state of each form component to my page component on submit. Can anyone recommend a best practice for my use case?

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>
    );
  }

Answer 1

define your state in the parent component and pass it down in props

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>
    );
  }
}

I've also defined someState which you can pass down as props to the child/form components. once you set state in there with handleChange it will set state in the parent component and you can submitData with that state