react组件状态同步-状态提升

假设定义组件TemperatureInputSon

import React from 'react'

class TemperatureInputSon extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: ''
        }
    }

    handleChange = (e) => {
       this.setState({content: e.target.value})
    }

    render() {
        return (
            <input type='text' type='text' value={ this.state.content } onChange={ this.handleChange }/>
        )
    }
}

export default TemperatureInputSon

然后再定义组件

import React from 'react'
import TemperatureInputSon from "./TemperatureInputSon";

class TemperatureInput extends React.Component {
    constructor(props) {
        super(props);
    }


    render() {
        return (
            <div>
                <TemperatureInputSon/>
                <br/>
                <TemperatureInputSon/>
            </div>
        );
    }
}

export default TemperatureInput

此时获得俩input框

此时由于俩子组件使用各自state，所以即使1框输入2框也不变

但是我们需要保持它们的数据一致，这时候就需要用到“状态提升 ”，简单来说就是子组件的值不再存在state，由父组件state共同管理，子组件通过接收props保持数据一致。

修改组件TemperatureInput 让它将值传给TemperatureInputSon 

    //新建state管理数据
    this.state = {
        content: ''
    }

    //事件处理
    handleContentChange = (e) => {
        this.setState({content: e})
    }


            <div>
                <TemperatureInputSon content={this.state.content} onContentChange={this.handleContentChange}/>
                <br/>
                <TemperatureInputSon content={this.state.content} onContentChange={this.handleContentChange}/>
            </div>

TemperatureInputSon调用TemperatureInput组件数据发生变化时触发handleContentChange

TemperatureInput组件的handleContentChange(e)接收到e以后更新state并且传给TemperatureInputSon组件

那么一次状态提升就这么完成了

(不得不说react官网翻译写得是真TM拗口，不过清楚后再看的话，会觉得他们写得其实挺具体的，就是不大友好)