React 状态提升简单版

React 中经常会遇到 几个组件共用一个数据状态的场景，例如，一个父组件中包含两个子组件，然后改变一个子组件，且另一个组件也随之发生变化。这种情况下，我们最好将这部分共享的状态提升到父组件里去。

React官方文档里的例子比较复杂，用这个简单的例子来说明，核心思想就是，子组件调用父组件的方法来改变props 从而改变另一个子组件的值：

class Father extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      value1 : '',
      value2 : ''
    };
  }
  value1Change(one) {//在父组件中改变value
     this.setState({value1 : one}) 
  }
  value2Change(two) {
    this.setState({value2 : two})
 }
  render(){
    return (
       <div>
         <Child1 value1={this.state.value1} onChangevalue ={this.value1Change.bind(this)}/>
         <Child2 value2 = {this.state.value1} />//给value2传入value1的值，这样，当value1的值是啥，value2就变成啥                              
       </div>
    );
  }
}
class Child1 extends React.Component{
  constructor(props) {
    super(props);
  }
  chuanzhi(e){
    this.props.onChangevalue(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')
);