在 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中文網其他相關文章！
