如何在反应中提升两级状态？ [英] 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屋！