コピー2019.10.23前回の投稿では、割り勘計算アプリをコンポーネント化し、HTMLがレンダリングされるところまで実装した。...親コンポーネント。...子コンポーネント。...子コンポーネント。各参加者の支払額などの表示や入力を担当する。現時点での画面イメージは以下。現在の画面Reactではイベントハンドラが紐付かない入力要素はreadonly扱いなので、まずはヘッダの支払額要素にイベントハンドラを紐付ける。</div>9行目のonchangeで、ハンドラメソッドの呼び出しを記述した。ハンドラメソッドは、Headerコンポーネントのメソッドとして定義したもの。}親コンポーネントから渡されるコールバック関数(プロパティはonChange)を呼び出して処理を移譲する。}constructorに、ハイライトした行を追加した。stateの初期値設定と、ハンドラメソッドのバインド。ハンドラメソッドの実体は以下。}前半では、子コンポーネントから受け取った新しい支払額と現在stateに保持しているデータから割り勘計算を行っている。後半(11-16行目)では状態の更新を行っている。Reactでの状態更新のポイント:直接stateをアップデートしてはいけない新しいstateオブジェクトを生成し、setStateメソッドを呼び出すことで更新する次にrenderメソッド。);Headerで発生したchangeイベントをハンドルするためのコールバックの定義を12行目で行っている。ここをアロー関数の書き方にすれば、おまじないのようなconstructorでのバインド処理は不要となる。これで、ヘッダーの支払額の変更に連動して割り勘計算処理が走り、結果がリアクティブに画面に表示されるようになった。次回はDetailコンポーネントの方の実装を進める。現時点でのソースコード(App.js)は以下のとおり。割り勘計算アプリ(1)公式のスタートガイド、チュートリアルのほか本2冊を読んでReactの基本は理解できた気がするので、ちょっとしたサンプルコードを書いて確認したいと思う。題材は割り勘計算アプリ。割り勘計算アプリ(5)前回の投稿までで大部分の実装ができたので、残りは人数の増減アクションの追加。各明細の横に削除と追加のボタンを配置して、クリック時のイベントで処理を行う。割り勘計算アプリ(4)前回の投稿では、ヘッダの支払額入力に反応して割り勘計算を行い、結果をヘッダおよび各明細に反映させるように実装を行った。今回は、各明細の操作を可能にする。明細コンポーネントの各入力要素のchangeイベントにハンドラメソッド...サンプル開発サンプルアプリ開発を始める自己学習用に何かサンプルアプリを開発しようと思う。目的は以下のような感じ。割り勘計算アプリ(2)前回の投稿では、ヘッダーコンポーネントと明細コンポーネントを作成し、固定値をプロパティで渡すところまで実装した。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントアーカイブ2020年2月2020年1月2019年12月2019年10月タイトルとURLをコピーしました。