制御された入力と制御されていない入力

制御入力と非制御入力は、Web 開発、特に React のようなフレームワークでのフォーム入力のコンテキストで使用される用語です。

制御された入力

制御された入力では、入力フィールドの値はコンポーネントの状態によって制御されます。これは、コンポーネントの状態が入力の現在の値を保持し、入力値が変更されると (ユーザーの入力などにより) 状態が更新され、入力値がその状態を反映することを意味します。これは通常、入力の値プロパティを状態値に設定し、入力が変化したときに状態を更新する onChange ハンドラーを提供することによって行われます。制御された入力は、フォーム処理のために React アプリケーションで一般的に使用されます。

import React, { useState } from 'react';

function ControlledInputExample() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
}

制御されていない入力

制御されていない入力では、入力フィールドの値は React 状態によって直接制御されません。代わりに、input 要素は自身の状態を内部で管理します。これは、React が入力値を直接制御できないことを意味し、値を取得するには、通常、React の状態をクエリするのではなく (refs を使用して) DOM に直接アクセスする必要があります。 React では制御されていない入力はあまり一般的ではありませんが、複雑なフォームの動作を処理したり、入力状態を異なる方法で管理する非 React ライブラリと統合したりする場合など、特定の状況では役立つ場合があります。

import React, { useRef } from 'react';

function UncontrolledInputExample() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}

要約すると、制御された入力は入力値を React 状態に直接結び付け、UI と状態間の制御と同期を強化します。制御されていない入力は DOM または他のライブラリによって内部的に管理され、React は必要に応じてそれらの値に間接的にアクセスします。

以上が制御された入力と制御されていない入力の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。