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(
          
     );
}

上の例では、name 状態変数が入力フィールドの値を制御します。 handleChange 関数は、入力値が変更され、入力値が値 prop.

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

非制御コンポーネントは、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(
          

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