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

これは

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

ガイドのリンク

ja.reactjs.org

state のリフトアップ

台風前の準備で大変というのと、頭痛がひどいので何回かに分けます。

stateのリフトアップとは一つの値を複数のコンポーネントが参照したい場合の解決策(子コンポーネントの変更を子同士で参照できない)として
リフトアップして親コンポーネント経由で子コンポーネントの変更を参照できるようにする。

se-tomo.com

この章では与えられた数値で水が沸騰するかどうかを判断するアプリを作成します。

まずは100℃で沸騰するような判定をする関数を作成します。

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

Calculator関数を作成する。
ここで入力のレンダーと入力値を保持する。

class Calculator 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;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />

        <BoilingVerdict
          celsius={parseFloat(temperature)} />

      </fieldset>
    );
  }
}

少ないですが、今日はここまで。