9、ReactJs基础知识09--状态提升

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。

然后把父组件修改state的函数传递给子组件，实现数据的更新

 　　　// 是否烧开组件
      function BoilingVerdict(props) {
        if (props.celsius >= 100) {
          return <p>The water would boil.</p>;
        }
        return <p>The water would not boil.</p>;
      }
      // 转换函数toCelsius
      function toCelsius(fahrenheit) {
        return (fahrenheit - 32) * 5 / 9;
      }
      // 转换函数toFahrenheit
      function toFahrenheit(celsius) {
        return (celsius * 9 / 5) + 32;
      }
      function tryConvert(temperature, convert) {
        const input = parseFloat(temperature);
        if (Number.isNaN(input)) {
          return '';
        }
        const output = convert(input);
        const rounded = Math.round(output * 1000) / 1000;
        return rounded.toString();
      }

      const scaleNames = {
        c: 'Celsius',
        f: 'Fahrenheit'
      };
      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>
          );
        }
      }
      ReactDOM.render(
        <Calculator />,
        document.getElementById('root')
      );