Реагировать на событие onChange для раскрывающегося списка дочерних компонентов, чтобы обновить состояние - PullRequest
Новая
       17

Реагировать на событие onChange для раскрывающегося списка дочерних компонентов, чтобы обновить состояние

0 голосов
/ 25 октября 2019

Я пытаюсь узнать, как реализовать форму React после преобразования моего кода Vanilla JS в React. У меня есть onChange, который будет обновлять состояние родительского компонента (форма), как показано ниже. Я создал дочерний компонент (библиотеку), который имеет свое собственное событие onChange, когда пользователь выбирает другой документ, как показано ниже, который влияет на другой дочерний компонент (документы). Есть ли способ для меня, чтобы иметь возможность обновить состояние формы с помощью идентификатора библиотеки, который выбран в компоненте библиотеки? 

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). Есть ли способ добиться этого или мне нужно реструктурировать мои компоненты, и если да, то как бы вы реструктурировали / организовали их, чтобы они были эффективными?

Заранее спасибо.

1 Ответ

0 голосов
/ 25 октября 2019

Вы описываете процесс подъема состояния от одного компонента к другому;очень подробный пример можно найти в официальной документации React .

...