React状态提示代码示例

index.js

// 温度常量标量名
const scaleNames = {
  c: "Celsius",
  f: "Fahrenheit"
};

// 温度单位转换计算
function toCelsius(fahrenheit) {
  return ((fahrenheit - 32) * 5) / 9;
}
function toFahrenheit(celsius) {
  return (celsius * 9) / 5 + 32;
}

// 温度转换；第一个参数是接收温度数值，第二个参数是接收转换函数
function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return "";
  }
  // 一开始这里的convert不知道有什么作用，后来才知道cover是接收转换函数，也就是toCelsius和toFahrenheit
  const output = convert(input);
  // console.log(output, output);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

// 是否是开水
function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>水开了</p>;
  }
  return <p>水还没有沸腾</p>;
}

// 温度输入框-01
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    // 调用父组件的handleCelsiusChange方法。而handleCelsiusChange方法是由父组件内的this.handleCelsiusChange提供的。
    // 而this.handleCelsiusChange是保存数据的作用，最终该数据会被tryConvert()方法调用，来做温度单位转换
    this.props.onTemperatureChange(e.target.value);
    // console.log(e.target.value)
  }

  render() {
    // 接收传递来的温度数值
    const temperature = this.props.temperature;
    // 接收温度标识符。如c或者f。C是摄氏度，F是华氏度
    const scale = this.props.scale;
    // 输入框，带有onChange处理函数
    return (
      <fieldset>
        <legend>请输入温度 / {scaleNames[scale]}</legend>
        <input value={temperature} onChange={this.handleChange} />
      </fieldset>
    );
  }
}

// 计算者-02
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: "" };
  }

  // 保存 摄氏度 数据
  handleCelsiusChange(temperature) {
    console.log(temperature);
    this.setState({ scale: "c", temperature });
  }
  // 保存 华氏度 数据
  handleFahrenheitChange(temperature) {
    this.setState({ scale: "f", temperature });
  }

  // 渲染页面 DOM
  render() {
    // 页面初始值
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    // 如果是f，就调用tryConvert()
    const celsius =
      scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit =
      scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature;

    // 返回两个输入框和一个文本提示框到dom内
    return (
      <div>
        {/* 
        传入摄氏度
        传入摄氏度函数
      */}
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange}
        />

        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange}
          {...console.log(this.handleFahrenheitChange)}
        />

        <BoilingVerdict celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

// ReactDOM.render(<TemperatureInput />, document.getElementById("root"));
ReactDOM.render(<Calculator />, document.getElementById("root"));