如何在反应中提升两级状态? [英] How to lift state two levels up in react?
本文介绍了如何在反应中提升两级状态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
跟随此exampleBy Reaction。
我希望能够将状态提升两个级别。这意味着,当事件发生在较低级别的组件时,我希望它影响上一级的状态。我该怎么做呢?这是推荐的吗?
例如,组件A是组件B的父项,组件B是组件C的父项。A->B->C。
在A中,
handleChange = (e) => {console.log(e)}
<B onChange={handleChange}/>
在B中,
handleChange = (e) => this.props.onChange(e)
<C onChange={this.handleChange}/>
在C中,
handleChange = (e) => this.props.onChange(e)
<button onClick={this.handleChange}></button>
有没有更好的方法?
推荐答案
在这里使用您的示例A->B->C。 您应该在A中创建一个setter。
A的状态:
this.state={ stateA: "whatever"}
A中的函数:
setStateA(newVal){
this.setState({stateA: newVal});
}
现在将其作为属性传递给B
<B setStateA={this.setStateA} />
在B中:
<C setStateA={this.props.setStateA} />
在C:中
// some code
this.props.setStateA("a new value");
//some code
我认为这是最好的办法。将函数作为属性传递给子对象。希望能有所帮助。
这篇关于如何在反应中提升两级状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文