前回の投稿では、ヘッダの支払額入力に反応して割り勘計算を行い、結果をヘッダおよび各明細に反映させるように実装を行った。 今回は、各明細の操作を可能にする。まずは、明細コンポーネントの各入力要素のchangeイベントにハンドラメソッドを紐付ける。 class Detail extends Component { render () { return ( <div> <input type="text" value={this.props.name} onChange={e => this.handleNameChange(e)} /> <l…

前回の投稿では、ヘッダーコンポーネントと明細コンポーネントを作成し、固定値をプロパティで渡すところまで実装した。次のステップとして、これらのコンポーネントをまとめる親コンポーネントを作成し、親コンポーネントのstateに保持するデータを渡すように修正する。 コンポーネントのstateの初期状態をconstructorでセットする。 // 割り勘計算機コンポーネント class BillSplitter extends Component { constructor(props) { super(props); this.state = { payment: 0, //支払額 total: 0,…

公式のスタートガイド、チュートリアルのほか本2冊を読んでReactの基本は理解できた気がするので、ちょっとしたサンプルコードを書いて確認したいと思う。題材は割り勘計算アプリ。 とりえあずnodeとcreate-react-appはインストール済みの前提で、アプリケーションの作成から。 $create-react-app bill-splitter 自動生成されたApp.jsに手を加えていく。今回はコンポーネントもファイルを分けずにApp.js内に記述していく。 import React, {Component} from 'react'; import './App.c…