制御コンポーネントと非制御入力（入門）
制御された入力（stateにvalueを紐付ける）と非制御の入力（DOMがvalueを管理する）の違いを理解します。
「制御コンポーネントと非制御入力（入門）」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
概要
目標：制御された入力と非制御入力を比較します。制御された入力ではReactのstateを唯一の情報源として使い、非制御入力ではDOMに任せます。
制御された入力
制御された入力：値がstateに紐づき、onChangeで更新されます。Reactは常に最新の値を把握できます。
デモ：制御された入力
この入力は制御されています。値はstateから取得し、変更のたびに更新します。
<div id="root"></div>
非制御入力
非制御入力：DOMが独自に値を保持し、必要なときだけrefで読み取れます。
デモ：非制御入力
ここでは入力は非制御です。Reactは値を管理せず、ボタンをクリックしたときにrefで読み取ります。
<div id="root"></div>
ヒントとトレードオフ
ヒント：
- 制御された入力は予測しやすく、ReactのstateがUIを制御します。
- 非制御入力はより単純ですが、制御性は低くなります。
- フォームでは制御された入力を推奨します。
制御された入力の確認
まとめ
まとめ：制御された入力はReactのstateに紐づくため、信頼性が高くなります。非制御入力ではDOMが値を管理します。ほとんどのフォームでは制御された入力を選びます。
よくある質問
「制御コンポーネントと非制御入力（入門）」レッスンは無料ですか？
はい。「制御コンポーネントと非制御入力（入門）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「制御コンポーネントと非制御入力（入門）」で何を学びますか？
制御された入力（stateにvalueを紐付ける）と非制御の入力（DOMがvalueを管理する）の違いを理解します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「制御コンポーネントと非制御入力（入門）」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- useStateの基礎と正しい更新
- イベント処理：onClickとonChange
- 制御コンポーネントと非制御入力（入門）