React では、制御されたコンポーネントとは、コールバック関数を通じて現在の値を更新するコンポーネントを指します。フォームをレンダリングする React コンポーネントは、フォームの状態が変化するたびに、フォーム上で発生する操作も制御します。コンポーネントの状態に書き込まれるため、この種のコンポーネントを React では制御コンポーネントと呼びます。
このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。
フォームをレンダリングする React コンポーネントは、ユーザー入力中にフォームに何が起こるかを制御します。このようにReactによって値が制御されるフォーム入力要素を「制御コンポーネント」と呼びます。
一部のネチズンは次のように説明しています。React では、フォームの状態が変化するたびに、その変化がコンポーネントの状態に書き込まれます。このタイプのコンポーネントは、React では制御されたコンポーネントと呼ばれます。
制御されたコンポーネントの更新プロセス:
1.初期状態のフォームのデフォルト値を設定できます
2. フォームの値が変更されるたびに、onChange イベント ハンドラーを呼び出します。
3. イベントプロセッサは、イベントオブジェクト e を通じて変更された状態を取得し、状態を変更します。
4. setState はビューの更新をトリガーし、フォーム コンポーネント値の更新を完了します。
制御されたコンポーネントは、OnChange などのコールバック関数を通じて現在の値を更新します。親コンポーネントはコールバック関数を通じてその状態を制御および管理し、新しい値をプロパティとして渡します。制御されたコンポーネントは「ダムコンポーネント」とも呼ばれます。
const { useState } from 'react'; function Controlled () { const [email, setEmail] = const handleInput = (e) => setEmail(e.target.value); value={email} onChange={handleInput} />;}知識を広げてください:
管理されていないコンポーネントとは何ですか?
非制御コンポーネントは、独自の状態を内部に保存し、必要に応じて ref を使用して DOM にクエリを実行し、現在の値を見つけることができるコンポーネントです。従来の HTML のようなものです。ほとんどのネイティブ React フォーム コンポーネントは、制御されたものと制御されていないものをサポートしています。
const { useRef } from 'react';function 例 () { const inputRef = useRef(null) return <input type="text" defaultValue="bar" ref={inputRef} />}4 それらの違いは何ですか?
制御されたコンポーネントでは、フォーム データは React コンポーネントによって処理されます。非制御コンポーネントでは、フォーム データは DOM 自体によって処理されます。
制御されたコンポーネントの場合は、コンポーネントの状態を使用する必要があります。制御されていないコンポーネントの場合、状態の使用は完全にオプションですが、その中で Ref を使用する必要があります。
制御されたコンポーネントの場合は入力で検証できますが、制御されていないコンポーネントの場合は検証できません。