React 制御/非制御コンポーネント

React では、フォーム入力を処理するための主なアプローチが 2 つあります。

• 制御されたコンポーネント
• 制御されていないコンポーネント

制御されたコンポーネントはより詳細な制御と検証を提供しますが、制御されていないコンポーネントはよりシンプルで断続的な値アクセスの基本的な形式に役立ちます。

管理対象コンポーネント

これらは、値が React State によって制御されるフォーム入力です。状態変数は入力の値が変更されるたびに更新され、入力の値は値 prop を通じて明示的に設定されます。

onChange イベント ハンドラーは状態を更新するために使用されます。

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

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

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

上記の例では、name 状態変数が入力フィールドの値を制御します。 handleChange 関数は、入力値が変更され、入力値が value prop を通じて name 状態変数の現在の値に設定されるたびに、name 状態を更新します。

制御されていないコンポーネント

非制御コンポーネントは、React State によって制御されるのではなく、内部で状態を管理するフォーム入力です。フォームの送信後、または必要なときにはいつでも、ref を使用して入力の現在の値にアクセスできます。

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

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

この上の例では、inputRef を使用して input フィールドの ref を作成します。 handleSubmit 関数は、inputRef.current.value を使用して入力の現在の値にアクセスします。必要に応じて入力値を利用するフォーム送信ロジックを実装できます。

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