React中的状态提升

桃扇骨 2022-11-03 10:47 90阅读 0赞

// 状态提升
    // 当有两输入框时，一个表示摄氏度，一个表示华氏度；
    
    // 首先封装输入框组件
    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.tempChange = this.tempChange.bind(this);
      }
      tempChange(e) {
        this.props.onTempChange(e.target.value);
      }
      render() {
        return (
          <fieldset>
            <legend>{ this.props.flag} </legend>
            <input value={this.props.temperature} onChange={this.tempChange} type="number"/>
          </fieldset>
        );
      }
    }
    // 封装总的组件, 里面有摄氏度和华氏度组件；
    class Calculators extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          temperature: '', // 温度
          tempFlag: 1 // 编辑温度的标志，1: 摄氏度，2：华氏度
        }
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
      }
      // 摄氏度方法
      handleCelsiusChange(temperature) {
        this.setState({
          tempFlag: 1,
          temperature
        })
      }
      // 摄氏度方法
      handleFahrenheitChange(temperature) {
        this.setState({
          tempFlag: 2,
          temperature
        })
      }
    
      render() {
        var temp = Number(this.state.temperature);
        // 摄氏度
        var celsius = this.state.tempFlag === 1 ? temp : (temp / 33.8).toFixed(2);
        var fahrenheit = this.state.tempFlag === 2 ? temp : (temp * 33.8).toFixed(2); 
        return (
          <div>
            <TemperatureInput flag="摄氏度" temperature={celsius} onTempChange={ this.handleCelsiusChange }></TemperatureInput>
            <TemperatureInput flag="华氏度" temperature={fahrenheit} onTempChange={ this.handleFahrenheitChange }></TemperatureInput>
          </div>
        )
      }
    }
    ReactDOM.render( <Calculators > </Calculators>,document.getElementById("root13"));