Question

在将Vanilla 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，以进行提交（用于后API调用）。有没有一种方法可以实现这一目标，或者我需要重组我的组件，如果是，那么您将如何重组/组织它们以提高效率？

谢谢。

Answer 1

您正在描述lifting the state从一个组件到另一个组件的过程； official React documentation中有一个非常详尽的示例。

对子组件下拉列表反应onChange事件以更新状态

1 个答案: