如何在ReactJS和SHOW中将数据从子组件传递到其父组件

Question

我该怎么做？

我有两个React组件，我想调用setState在一个组件中设置状态，但在另一个组件中调用，我需要在父组件中执行POST请求以显示数据 但事件发生在儿童部分 我该怎么办？

handleSubmit方法需要在我尝试传递给道具的子组件中运行

我有一个错误，说handleSubmit中数据的某些属性未定义。

下面的代码：

父组件：

class ViewNotas extends Component {
  constructor(props) {
    super(props);

    this.state = {
      open: [],
      newNote: false,
      viewNotas: false,
      observacao: '',
      data: '',
    };

    this.handleOpen = this.handleOpen.bind(this);
    this.changeObservacao = this.changeObservacao.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleOpen(id, isOpen) {
    if (!isOpen) {
      this.setState({ open: this.state.open.concat(id) });
    } else {
      this.setState({
        open: this.state.open.filter((objectId) => id !== objectId),
      });
    }
  }

  changeObservacao = (observacao) => {
    this.setState({ observacao });
  };

  handleSubmit(event) {
    event.preventDefault();
    let data = {
      dataHora: new Date(),
      numeroPedido: this.props.requestId, **request id is undefined**
      usuario: this.props.task._task._worker.name,
      observacao:
        this.state.observacao +
        ` Inserido em Twilio - ${this.props.task.attributes.Protocolo}`,
    };

    const config = {
      method: 'post',
      url: `https://dbdiagnosticos.lwcs.com.br:8443/matrix/sendNotas`,
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
      data: data,
    };

    axios(config)
      .then((response) => {
        this.setState({ data: response.data });
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    let data = this.props.data;

    return (
      <Modal open={this.props.open} visible={this.props.visible}>
        <SC.Container>
          <SC.Header>
            <SC.Title>
              {this.state.newNote ? 'Incluir Notas' : 'Notas'}
            </SC.Title>
            {!this.state.newNote ? (
              <SC.AddBack onClick={(event) => this.props.visible(false)}>
                <MdBackspace size="24px" color="#FFF" />
              </SC.AddBack>
            ) : (
              <SC.AddBack onClick={(event) => this.setNewNote(false)}>
                <MdBackspace size="24px" color="#FFF" />
              </SC.AddBack>
            )}
          </SC.Header>
          {data !== null && data[0] !== null && data[0].length > 0 ? (
            <SC.List>
              {
                (data[0] =
                  data[0].sort((a, b) => b.idNota - a.idNota) &&
                  data[0].map((dataObject) => {
                    const filter = this.state.open.filter(
                      (id) => id === dataObject.idNota
                    );
                    const isOpen = filter.length > 0;

                    return (
                      <SC.Note key={dataObject.idNota}>
                        <SC.Wrapper>
                          <SC.Description>
                            Nota:&nbsp;<span>{dataObject.idNota}</span>
                          </SC.Description>
                          <SC.Button
                            onClick={(event) => {
                              this.handleOpen(dataObject.idNota, isOpen);
                            }}
                          >
                            {!isOpen ? (
                              <IoMdArrowDropleftCircle size={'32px'} />
                            ) : (
                              <IoMdArrowDropdownCircle size={'32px'} />
                            )}
                          </SC.Button>
                        </SC.Wrapper>
                        {isOpen && (
                          <React.Fragment>
                            <SC.Field>
                              <p>
                                <b>Usuário:</b> {dataObject.usuario}
                              </p>
                              <p>
                                <b>Pedido:</b> {dataObject.numeroPedido}
                              </p>
                              <p>
                                <b>Data:</b>{' '}
                                {this.formatDate(dataObject.dataHora)}
                              </p>
                              <textarea
                                disabled
                                defaultValue={dataObject.observacao}
                              ></textarea>
                            </SC.Field>
                          </React.Fragment>
                        )}
                      </SC.Note>
                    );
                  }))
              }
            </SC.List>
          ) : null}
          {this.state.newNote ? (
            <ViewIncluirNotas
              setNewNote={this.props.setViewNotas}
              open={this.state.viewNotas}
              visible={this.setViewNotas}
              close={this.setNewNote}
              usuario={this.props.task}
              handleSubmit={this.handleSubmit}
              observacao={this.state.observacao}
              changeObservacao={this.changeObservacao}
              pedido={this.props.requestId}
              handleSubmitNotes={this.props.handleSubmitNotes}
              changeObservacao={this.changeObservacao}
            />

这是子级组件：

class ViewIncluirNotas extends Component {
  constructor(props) {
    super(props);

    this.state = {
      observacao: null,
      newNote: false,
    };

    this.setNewNote = this.setNewNote.bind(this);
  }

  handleInputChange = (event) => {
    this.props.changeObservacao(event.target.value);
  };

  render() {

    return (
      <SC.Form
        onSubmit={(event) => {
          this.props.handleSubmit(event);
        }}
      >