Получить данные из дочернего компонента в ответ в родительском

Question

У меня есть базовый компонент, чья функция рендеринга выглядит следующим образом

    <QuestionsDrawer open={this.state.drawerOpen} onClose={this._toggleDrawer}>
      <Search />
      <QuestionList
        questions={this.state.rowData}
        selected={[]}
        ref={ref => (this.listItem = ref)}
      />
    </QuestionsDrawer>

Когда ящик закрыт this._toggleDrawer функция называется.

_toggleDrawer = () => {
  console.log("selected", this.listItem._fetchSelected());
  this.setState(prevState => ({
    drawerOpen: !prevState.drawerOpen,
  }));
};

Когда это произойдет, я хотел бы получить данные из QuestionList составная часть. я пытался refs но я получаю Cannot read property '_fetchSelected' of undefined ошибка.

Это то, что функция в QuestionList компонент выглядит

_fetchSelected = () => {
  return this.state.selected;
};

Что здесь не так и есть ли лучший способ реализовать это?

Answer 1

Вы можете создать метод в родительском компоненте и передать его через реквизиты дочернему компоненту. Этот метод может принимать аргумент, когда вы отправляете this.state.selected от вашего дочернего компонента. Ваш родительский компонент получит доступ к этим данным из метода.

Я сделал быструю визуализацию кода ниже и надеюсь, что вы поняли идею.

// Callback function in the parent that gets passed
// by props to QuestionList

const questionListCallback = (dataFromQuestionList) => {
  // Do something with the data from QuestionList here
}

<QuestionsDrawer open={this.state.drawerOpen} onClose={this._toggleDrawer}>
  <Search />
  <QuestionList
    questions={this.state.rowData}
    drawerOpen={this.state.drawerOpen}
    callbackFromParent={this.questionListCallback}
    selected={[]}
    ref={ref => (this.listItem = ref)}
  />
</QuestionsDrawer>


// Below is for the QuestionList component
// If you for example want to grab the data in componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  // Do something to get the data here and store it somewhere
  // Maybe in the state in the child?
  if (!this.props.drawerOpen && prevState.data !== this.state.data) {
    this.setState({ data: data}, () =>{
      callbackFromParent(data);
    })
  }
}