React公式ドキュメントを読む25 複数コンポーネントでstateを共有する

// 沸騰しているかどうかを判定するコンポーネント
function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>沸騰しています！</p>;
  }
  return <p>沸騰していません…</p>;
}

// 摂氏温度入力・管理コンポーネント
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>摂氏温度を入力してください:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />
        <BoilingVerdict
          celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}

// レンダリング
ReactDOM.render(
  <Calculator />,
  document.getElementById('root')
);

// 変数の定義
const scaleNames = {
  c: '摂氏温度',
  f: '華氏温度'
};

// 華氏から摂氏への変換関数
function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

// 摂氏から華氏への変換関数
function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

// 温度を有効な数値に変換する関数
// 引数temperatureは入力された温度値
// 引数convertはtoCelsiusまたはtoFahrenheit
function tryConvert(temperature, convert) {

  // temperature を浮動小数点数にする
  const input = parseFloat(temperature);

  // 無効な temperature には空の文字列を返す
  if (Number.isNaN(input)) {
    return '';
  }

  // 小数第3位までで四捨五入する
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

// 沸騰しているかどうかを判定するコンポーネント
function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>沸騰しています！</p>;
  }
  return <p>沸騰していません…</p>;
}

// 【子】TemperatureInputコンポーネント
// 温度入力を受け付ける
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>{scaleNames[scale]}を入力してください:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

// 【親】Calculatorコンポーネント
// 入力された温度値をstateで管理する
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} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

//レンダリング
ReactDOM.render(
  <Calculator />,
  document.getElementById('root')
);

const temperature = this.props.temperature;

{
  temperature: '37',
  scale: 'c'
}

{
  temperature: '212',
  scale: 'f'
}