反応制御コンポーネントとは何ですか

React では、制御コンポーネントとは、コールバック関数を通じて現在の値を更新するコンポーネントを指します。フォームをレンダリングする React コンポーネントは、ユーザー入力中にフォーム上で発生する操作も制御します。フォームが変更され、コンポーネントの状態に書き込まれます。このタイプのコンポーネントは、React では制御されたコンポーネントと呼ばれます。

このチュートリアルの動作環境: Windows 10 システム、react17.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] = useState();
  const handleInput = (e) => setEmail(e.target.value);
  return <input type="text" value={email} onChange={handleInput} />;
}

知識を広げる:

非管理コンポーネントとは何ですか?

非制御コンポーネントは、独自の状態を内部に保存するコンポーネントです。必要に応じて、ref を使用して DOM をクエリし、現在の値を見つけることができます。従来の HTML のようなものです。ほとんどのネイティブ React フォーム コンポーネントは、制御されたものと制御されていないものの両方をサポートしています:

const { useRef } from 'react';
function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

4 それらの違いは何ですか?

制御コンポーネントでは、フォーム データは React コンポーネントによって処理されます。非制御コンポーネントでは、フォーム データは DOM 自体によって処理されます。

制御されたコンポーネントの場合、コンポーネントの状態を使用する必要があります。制御されていないコンポーネントの場合、状態の使用は完全にオプションですが、その中で Ref を使用する必要があります。

制御されたコンポーネントの場合は入力を検証できますが、制御されていないコンポーネントの場合は検証できません。

【関連する推奨事項:

JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上が反応制御コンポーネントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。