Доступ к дочернему значению состояния в родительском компоненте в React

Question

У меня есть (например) два компонента в React. Первый App.js является родительским компонентом. Он передает некоторые значения дочернему компоненту Child.js. В child.js, он получает значения через props и обновляет некоторые state переменные, используя axios результаты вызова. это отлично работает

Теперь мне нужно получить значение результата обновления в App.js. как получить это значение в App.js?

App.js

this.state ({ ... 
    examResult: null // need to update this with the child component result.
 })

<ChildComponent 
    Id={this.state.StudentId} 
    Name={this.state.StudentName}
/>

Child.js

state {
   examResult: null
}
...
componentDidMount()
{
    const {Id, Name} = this.props;
    axios.get( .... //To get the Result
    this.setState(
    { examResult: examResult} //Update the result to state variable. It wors fine. I need to pass this value to App.js
    )
}

Answer 1

Вы можете сделать это так:

Родитель:

updateResults(results) {
   this.setState({examResult:results});
}
render() {
   return (<ChildComponent 
    Id={this.state.StudentId} 
    Name={this.state.StudentName}
    updateResults={this.updateResults.bind(this)}
/>)
}

Ребенок:

componentDidMount()
{
    const {Id, Name, updateResults} = this.props;
    axios.get( ....).then(results => //To get the Result
      updateResults(results.data)
    )
}

Answer 2

Вы можете передать другую функцию в качестве реквизита. А из дочернего компонента вы можете вызывать эту функцию и передавать любые параметры, которые вам нужны в родительском компоненте.

Ex:

<ChildComponent 
    Id={this.state.StudentId} 
    callback={this.callbackfn}
    Name={this.state.StudentName} />

Где this.callbackfn будет функцией вашего родительского компонента.

Из дочернего компонента вы можете назвать его как

this.props.callback