React入門 練習問題 18：フォーム入力：状態管理の方式
Reactでフォームの入力欄（input要素）を「制御されたコンポーネント（controlled component、＝入力値をReactのstateで管理する仕組み）」として実装する際に必要な要素として正しいものはどれか。
- inputタグにvalue属性とonChange処理を両方設定して管理する
- inputタグにvalue属性のみを設定し変更処理は省略する
- inputタグにdefaultValue属性のみを設定して管理する
- inputタグにrefだけを設定してDOM操作で値を管理する
- inputタグには属性を設定せずuseEffectで値を監視する
正解と解説を見る
正解：inputタグにvalue属性とonChange処理を両方設定して管理する
制御されたコンポーネントでは、入力値をstateに保持し、value属性とonChangeイベントハンドラの両方を設定することで、入力値の表示と更新をReact側で一元管理する。
【正解の理由】
value属性でstateの値を表示し、onChangeで入力があるたびにstateを更新することで、入力欄の値が常にReactのstateと同期した状態になる。これにより入力値のバリデーションや加工がしやすくなる。
【不正解の理由】
• 「value属性のみを設定し変更処理は省略する」：onChangeがないと入力ができない読み取り専用の欄になってしまう
• 「defaultValue属性のみを設定して管理する」：defaultValueは初期値の指定のみで、以降の値をReactが管理しない非制御コンポーネントの手法である
• 「refだけを設定してDOM操作で値を管理する」：refを使う方法は非制御コンポーネントの手法であり、制御されたコンポーネントとは異なる
• 「属性を設定せずuseEffectで値を監視する」：入力値の変化を検知する仕組みがなく、制御された状態を作れない