反應受控/不受控組件

在 React 中，處理表單輸入主要有兩種方法：

• 受控組件
• 不受控制的組件

受控組件提供更多的控制和驗證，而不受控組件更簡單，對於間歇性值存取的基本形式有用。

受控組件

這些是表單輸入，其值由 React State 控制。每當輸入的值發生變化時，狀態變數就會更新，並且輸入的值是透過 value 屬性明確設定的。

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 屬性設定為名稱狀態變數的目前值。

不受控制的組件

不受控制的元件是在內部管理其狀態的表單輸入，而不是由 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 存取輸入的目前值。可以實現表單提交邏輯以根據需要使用輸入值。

以上是反應受控/不受控組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！