Reactガイドを読んでいくその14

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

state のリフトアップ

2 つ目の入力を追加する

摂氏だけでなく華氏も対応できるようにしていきます。
昨日作ったCalculatorクラスからtemperatureを抜き出してTemperatureInputクラスにします。

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

華氏と摂氏入力を用意します。

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};

また、以下のようにレンダーを二つ分用意することで、摂氏と華氏両方のレンダリングが可能になります。

class Calculator extends React.Component {
  render() {
    return (
      <div>
        <TemperatureInput scale="c" />
        <TemperatureInput scale="f" />
      </div>
    );
  }
}

ただ、今のままではただ数値が入力できるようになっているだけで片方の数値を入力しても
もう片方は更新されず、また沸騰したかどうかの判断もしません。
次回から両者の値が更新できるように対応ししていきます。

今日はここまで。