Reactにおけるフォームの理解
ユーザーはフォームを通じてウェブアプリとやり取りします。ログイン、検索、お問い合わせページなどでフォームが使用されます。Reactでは、ステート（state）を利用することで、これらのデータの管理を簡単に行うことができます。
コントロールされたコンポーネント (Controlled Components)
Reactでは、多くの場合「コントロールされたコンポーネント（controlled components）」を使用します。これは、Reactのステートが入力値を管理することを意味します。
仕組み:
• value プロップが入力とステートを紐付けます。
• onChange イベントが、ユーザーの入力に合わせてステートを更新します。
• Reactが「信頼できる唯一の情報源（single source of truth）」となります。
プロセスは以下の流れで行われます：
ユーザーの入力 → onChange イベント → ステートの更新 → 再レンダリング → UIの更新
複数のフィールドの管理
すべての入力に対して個別のステートを用意する必要はありません。1つのオブジェクトですべてのデータを保存できます。
このパターンを使用してください:
• フォーム全体に対して1つのステートオブジェクトを使用します。
• 入力要素に name 属性を使用します。
• ステートを更新するための handleChange 関数を1つ作成します。
[e.target.name]: e.target.value という構文を使用することで、変更を発生させた特定のフィールドを更新できます。これにより、コードをクリーンに保つことができます。
送信の処理
ユーザーがフォームを送信すると、デフォルトではブラウザがページをリフレッシュします。これではアプリが正常に動作しません。
onSubmit 関数内で e.preventDefault() を使用してください。これによりリロードが停止され、Reactでデータを処理できるようになります。
特殊な入力タイプ
入力タイプによって、必要なプロパティが異なります：
• テキスト入力には e.target.value を使用します。
• チェックボックスには e.target.checked を使用します。
• セレクトメニューでは、value プロップを使用して選択されたオプションを追跡します。
バリデーションのヒント
データを送信する前に、必ずバリデーション（検証）を行ってください。以下の項目を確認しましょう： • 必須項目。 • 正しいメール形式。 • パスワードの最小文字数。
Reactフォームのベストプラクティス
- ref の代わりにコントロールされたコンポーネントを使用する。
- 関連するフィールドを1つのオブジェクトにまとめて保存する。
- すべての入力要素に意味のある
name属性を使用する。 - 送信時のデフォルトのページリロードを防止する。
- すべてのテキスト入力に対して1つの変更ハンドラーを再利用する。
これらのステップをマスターすることで、プロフェッショナルなウェブアプリケーションを構築できるようになります。
出典: https://dev.to/aj_arul/understanding-forms-in-react-19gj