反应提升状态

时间:2018-08-21 03:47:19

标签: reactjs

React文档中包含以下代码:

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} />

      </div>
    );
  }
}

(完整示例为{Click here

因此,两个<TemperatureInput />组件是输入,如果您在“摄氏”字段中输入数字,则华氏温度字段将输出其转换,反之亦然。

因此,我遇到了const celsiusconst fahrenheit三元运算符。让我解释一下:

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

例如,如果我在摄氏字段中输入值100,则华氏字段将输出212(用function toFahrenheit(celsius)完成),因此输入值将返回到temperature属性<TemperatureInput />组件的组成部分,它将被发送到const celsius,这就是我的问题所在,因为这样的const表示如果scale === 'f'然后将其转换为摄氏度,但是这种情况是否,所以它说: temperature,那是我不明白如何将100值发送到const fahrenheittryConvert()函数的地方。

有点混乱。你能给我解释一下吗?

0 个答案:

没有答案