予約フォームを制御せよ

中段 / 目安 25分

陽葵さんがノートを広げて言います。「予約フォームもReactに引っ越し! 入力した内容をReactがちゃんと把握してる状態にしてね」。

素の JavaScript のときは、入力欄の中身を知りたくなったら input.value を読みに行っていました。文字は入力欄そのものが覚えていて、こちらから取りに行く形です。React ではこれをひっくり返します。文字を覚えるのは state で、入力欄はその state を映しているだけにするのです。この形を制御コンポーネントと呼びます。

やることは2つだけです。1つめは value={name} を書いて、入力欄に映すものを state から与えること。2つめは onChange で、打たれた文字を state に書き戻すことです。

e.target.value の e.target は「今まさに打たれた入力欄」で、その value が打ち込まれた新しい文字です。それを更新関数に渡すと state が変わり、React が部品を呼び直し、value={name} を通して同じ文字が入力欄に返ってきます。文字が一周して戻ってくるので、画面上は普通に打てているように見えます。

ここでよくつまずくのが、value だけ書いて onChange を書かない形です。state は変わらないので、何を打っても入力欄は初期値のまま固まります。「打っても文字が出ない」ときは、書き戻しの側が欠けていると思ってください。逆に onChange だけを書くと、state は動くのに入力欄が state に従わなくなり、片想いのままです。この2つは必ず対で書きます。

人数のような選択式も同じです。select に value と onChange を付ければ、選ばれた値が state に入ります。ただし select から返る値は必ず文字列なので、数として扱いたいときは Number(e.target.value) のように変換してください。今回は表示に混ぜるだけなので、そのままでも構いません。

state に入っていることの何が嬉しいかというと、入力の途中経過を画面のどこにでも出せることです。今回は入力しながらリアルタイムに変わる確認行を出してもらいます。値を取りに行く必要がないので、{name} と書けばそこに出ます。

完成条件

• 名前を useState で持ち、id が name の入力欄を value と onChange で制御する
• 人数を useState で持ち、id が guests の select を value と onChange で制御する
• className が preview の行に、いま入力されている名前と人数を出す。「陽葵 さま / 2名」のように、名前と人数の両方が読み取れる形にする
• 入力欄に打った内容が、その場で確認行に反映される

進め方

まず名前だけを制御して、確認行に名前が出るところまで作ってください。それが動いたら人数を同じ形で足します。1つずつ動かすほうが、どちらが壊れているか分かりやすいです。

初期コードの入力欄には value も onChange も付いていません。今は React が中身をまったく知らない状態です。ここに両方を足していきます。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。