在React的父组件中访问子状态值

时间:2019-03-12 19:23:11

标签: javascript reactjs components parent-child

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

1 个答案:

答案 0 :(得分:1)

您可以传递其他功能作为道具。从子组件中,您可以调用该函数并在父组件中传递所需的任何参数。

例如:

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

this.callbackfn将是您父组件中的一个函数。

在子组件中,您可以将其称为

  

this.props.callback