react状态提升

https://zh-hans.reactjs.org/docs/lifting-state-up.html

这样 多个子组件的值可以联动变化。

 

关键点：

class ParentComponent extends React.Componnet{
// …………
　　changeMyValue=(para)=>{
　　　　this.setState({myValue: para})
　　}
　　render(){
　　　　return(
　　　　　　<SubComponent  myValue=`${this.state.myValue}` changeMyValue=changeMyValue>
　　　　)
　　}
}

 

class SubComponent extends React.Componnet{
// …………
    constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.props.changeMyValue(e.target.value);
    }
　　render(){
       const myValue = this.props.myValue;
　　　　return(
　　　　　　<Input  value=`${myValue}`  onChange={this.handleChange} />
　　　　)
　　}
}        

 

1.子组件通过父组件传递过来的prop设置子组件的值。

2.子组件更新值得时候，通过父组件prop传递过来的方法changeMyValue，修改父组件用于传递给子组件的值。

 

下面是官方例子：

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}