Блог

У меня есть (например) два компонента в 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
    )
}
  

Вы можете сделать это следующим образом:

Родительский:

 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)
    )
}
  

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

Пример:

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

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

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

this.props.обратный вызов