Javascript 子组件下拉列表的React onChange事件更新状态

在将我的普通JS代码转换为React之后，我试图学习如何实现React表单。我有一个onChange，它将更新父组件的表单状态，如下所示。我制作了一个子组件库，当用户选择一个不同的文档时，它有自己的onChange事件，如下所示，这会影响它拥有文档的另一个子组件。是否有一种方法可以使用在库组件中选择的库ID更新表单状态

class FormTemplate extends Component {
  state = {
    libraryId: "",
    libraryName: "",
    email: ""
  };

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    return (
      <Form>
        <Row>
          <Col xs={6} md={6}>
            <Form.Group controlId="exampleForm.ControlInput1">
              <Form.Label>First Signer Email</Form.Label>
              <Form.Control
                type="email"
                name="email"
                onChange={this.handleChange}
                placeholder="name@example.com"
              />
            </Form.Group>
            <button type="submit">POST</button>
          </Col>
          <Col xs={6} md={6}>
            <GetLibrary/>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default FormTemplate;

子库模板

export class GetLibrary extends Component {
  state = {
    library: [],
    libraryId: ""
  };

  componentDidMount() {
    API.get("library")
      .then(res => {
        const library = res.data.library;
        this.setState({ library });
      })
      .catch(err => {
        console.log(err);
      });
  }

  handleChange = e => {
    console.log(e.target.value);
    this.setState({
      libraryId: e.target.value
    });
  };

  render() {
    const { library, libraryId } = this.state;
    let document;

    if (libId !== "") {
      document = (
        <p>
          <GetDocument key={libId.toString()} libraryId={libraryId} />
        </p>
      );
    } else {
      document = <p>Choose a document</p>;
    }

    return (
      <Fragment>
        <Form.Group controlId={libraryId}>
          <Form.Label>Select Library Document</Form.Label>
          <Form.Control as="select" onChange={this.handleChange}>
            {library.map(libdoc => (
              <option key={libdoc.id.toString()} value={libdoc.id}>
                {libdoc.name}
              </option>
            ))}
          </Form.Control>
          {document}
        </Form.Group>
      </Fragment>
    );
  }
}

export default GetLibraryDocument;

我实际上是在尝试从子组件获取libdoc.id和libdoc.name，以便能够在父窗体中将父状态更新为libraryId和libraryName，以便提交post API调用。是否有办法实现这一点，或者我是否需要重组我的组件，如果有，您将如何重组/组织它们以提高效率

---

提前感谢。

您正在描述从一个组件到另一个组件的过程；在中有一个非常全面的示例。

还有一个上下文api，它允许您在组件之间共享状态，而无需通过多个组件传递状态或事件处理程序。即从->库->文档。因为这使您的代码与组件树紧密耦合。@MichaelKnight我的理解是，当您使用大型组件树时，上下文通常是更可取的解决方案，而在较小的应用程序（如OP）中，状态提升更可取，因为它使组件更具可重用性-作为一个整体，它绝对值得研究不过，还有另一种解决方案！我同意，我认为若你们只是通过两个层次的状态，那个么支撑钻井是一个合理的方法。我真的很喜欢上下文api，并且发现它比prop-drilling更容易理解。我不一定认为这会降低组件的可重用性。根组件应该在它自己的上下文中导出，因此它们都有自己的状态。或者，您可以将它们都包装在一个上下文中，并拥有一个共享状态，如果这对于您特定的用例是可取的，那么这样做可能会影响性能