複数入力を持つ制御フォーム
複数の制御された入力を持つフォームを作り、それぞれの値をstateに保存し、Reactで送信を処理します。
「複数入力を持つ制御フォーム」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
導入
目標：複数の制御された入力を持つフォームを作成します。各入力はstateからvalueを取得し、onChangeで更新します。
制御された入力のおさらい
制御された入力のvalueはReactのstateに紐づきます。すべての変更をonChangeで処理し、stateを更新します。
デモ：制御されたフォーム
各入力でvalueとonChangeを使い、stateで両方のフィールドを追跡します。送信もReactで処理します。
<div id="root"></div>
メリット
制御されたフォームのメリット：
- Reactのstateが唯一の情報源になる
- バリデーションが簡単になる
- 予測しやすいUIになる
バリデーションの基本
バリデーションは送信時または変更のたびに実行できます。制御された入力なら、値をすぐに確認してエラーメッセージを表示できます。
ヒント
ヒント：
- 必ずvalueをstateに紐づけます
- nameを使い、複数の入力で1つのハンドラーを利用します
- フォーム送信時のデフォルトの再読み込みを防ぎます
制御されたフォームの確認
まとめ
まとめ：制御されたフォームでは、各入力をReactのstateに紐づけます。変更をonChangeで処理し、Reactを唯一の情報源として保ちます。
よくある質問
「複数入力を持つ制御フォーム」レッスンは無料ですか？
はい。「複数入力を持つ制御フォーム」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「複数入力を持つ制御フォーム」で何を学びますか？
複数の制御された入力を持つフォームを作り、それぞれの値をstateに保存し、Reactで送信を処理します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「複数入力を持つ制御フォーム」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 複数入力を持つ制御フォーム
- 基本的な検証パターンと送信処理
- エラーメッセージとTouched/Dirty状態（Vanilla）