React状态提升实践-CSDN博客

本文链接：https://blog.csdn.net/TAO_GIS/article/details/82706350

本文介绍了一个简单的React状态提升示例，展示了如何通过父组件管理多个子组件间的共享状态，实现一个子组件更改值能同步影响另一个子组件的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 react 经常会遇到几个组件需要共用状态数据的情况。比如我们想要通过一个子组件来改变一个父容器组件中另一个子组件的值。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。

react官方文档的例子太过复杂，我们举一个简单的例子来说明：

我们新建两个组件，这两个组件分别返回一个input。现在我们通过在第一个input中输入数据，来改变第二个input的值。

（示意图）

当一个input在组件里时，我们知道如何利用state来改变input的值，但是显然，我们并不能利用当前组件的state来修改另一个组件的内的input的值。那我们该怎么做呢？

我们这样做：

上面这张图看起来很复杂，其实概括起来就一句话：子组件调用父组件方法改变父组件的props,从而改变子组件。（注：它本身或其它组件）

以下为demo代码：

class Father extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            Value1: '',
            Value2: ''
        }
    }
    value1Change(aa) {
        this.setState({
            Value1: aa
        })
    }
    value2Change(bb) {
        this.setState({
            Value2: bb
        })
    }
    render() {
        return (
            <div style={{ padding: "100px" }}>
                <Child1 value1={this.state.Value1} onvalue1Change={this.value1Change.bind(this)} />
                <br />
                <Child2 value2={this.state.Value1} />
            </div>
        )
    }
}
class Child1 extends React.Component {
    constructor(props) {
        super(props)
    }
    chuanzhi(e) {
        this.props.onvalue1Change(e.target.value)
    }
    render() {
        return (
            <input value={this.props.Value1} onChange={this.chuanzhi.bind(this)} />
        )
    }
}
class Child2 extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <input value={this.props.value2} />
        )
    }
}

ReactDOM.render(
    <Father />,
    document.getElementById('root')
)