これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
state のリフトアップ
台風前の準備で大変というのと、頭痛がひどいので何回かに分けます。
stateのリフトアップとは一つの値を複数のコンポーネントが参照したい場合の解決策(子コンポーネントの変更を子同士で参照できない)として
リフトアップして親コンポーネント経由で子コンポーネントの変更を参照できるようにする。
この章では与えられた数値で水が沸騰するかどうかを判断するアプリを作成します。
まずは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> ); } }
少ないですが、今日はここまで。