React の制御コンポーネントと非制御コンポーネント

制御されたコンポーネント: state または props を介してフォーム要素の状態を制御する React コンポーネント。つまり、すべての状態の突然変異には、関連付けられたハンドラー関数があります。

特徴

• state - 要素の値によって制御される値は状態変数にバインドされます
• イベント ハンドラーが必要です - 状態を更新するには、イベント ハンドラーが必要です
• 予測可能 - コンポーネントの状態が入力値を表すため、コンポーネントは予測可能でデバッグが簡単です
• React 入力データを処理し、DOM に依存せずに現在の入力値を追跡します。

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

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

非制御コンポーネント: DOM 自体がフォーム要素の状態を処理する React コンポーネント。 React は内部的に自身の状態を保存する ref 経由で入力値にアクセスします。必要なときに ref を使用して DOM にクエリを実行し、現在の値を見つけます。これは従来の HTML に少し似ています。

特徴

• DOM によって制御される値 - 入力フィールドの値は状態変数にバインドされません。
• Ref を使用して値にアクセスするか、必要に応じて入力要素の値を取得します
• 入力に対するリアルタイムの制御が必要ない場合は、セットアップが簡単です。
• 入力を制御するために反応状態が必要ないシナリオに適しています。

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

これは、管理されているコンポーネントと管理されていないコンポーネントの比較表です:

いつ使用するか
リアルタイム検証、入力書式設定、または即時フィードバックのために制御 - 。
Uncontrolled - ファイルのアップロードなどの単純なユースケースに使用されます。事前に入力されたフォーム値は頻繁に使用されないか、フォーム送信まで延期する必要があります。

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