React状态提升

React状态提升

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件.

• 子组建1

class One extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){
    return (
      <div>One:{this.props.value + '1'}</div>
    )
  }
}

• 子组建2

class Two extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){
    return (
      <div>Two:{this.props.value + '2'}</div>
    )
  }
}

• 父组建

class Three extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      text:'牛逼'
    }
    //下面这步不能少，否则报 `Cannot read property 'setState' of undefined`错误
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e){
    this.setState({text:e.target.value});
  }
  render(){
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.handleChange} />
        <One value={this.state.text}/>
        <Two value={this.state.text}/>
      </div>
    )
  }
}

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