React.js 官方资料摘记：状态提升

状态提升

官网上那个例子很复杂，所以我在这里做了简化，说明的内容是一样的。

先说明一下实现目标：

• 有两个输入框，当一个输入框输入内容时，另一个自动输入相同内容

实现原理：

• 将两个输入框的value属性的值绑定到父类中去
• 将两个输入框的onChange事件交由父类进行处理

看不懂也没有关系，直接看代码就能弄懂了。

首先是基本的输入组件：

class InputNumber extends React.Component{
      handleChange=()=>{
        this.props.handleChange(event.target.value);
      }
      render(){
        const inputNumber=this.props.number;
        return(
          <div>
            <input type="text" value={inputNumber} onChange={this.handleChange} />
          </div>
        );