Reactjs學習記錄（006）-狀態提升

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 '';
  }
  const output = convert(input);  //convert爲toCelsius或toFahrenheit由傳入參數而定
  const rounded = Math.round(output * 1000) / 1000;//Math.round()爲取整的方法
  return rounded.toString();
}

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

class TemperatureInput extends React.Component {  //TemperatureInput爲子組件
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);  //當我們想要響應數據改變時，使用父組件提供的 this.props.onTemperatureChange() 而不是this.setState() 方法
  }           {/* handleCelsiusChange(temperature) {
               this.setState({scale: 'c', temperature}) } 
                  */}

  render() {
    const temperature = this.props.temperature;   //使用 this.props.temperature 替代 this.state.temperature
    const scale = this.props.scale; {/*<TemperatureInput
          scale="f"          //在這個華氏度的框裏scale="c"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />*/}
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend> {/* <legend>加了特效*/}
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

class Calculator extends React.Component {   //Calculator是父組件
  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; //this.setState({scale: 'c', temperature})在這裏用
    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"          //在這個攝氏度的框裏scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"          //在這個華氏度的框裏scale="c"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

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