受控元件：透過 state 或 props 控製表單元素狀態的 React 元件，即每個狀態突變都會有一個關聯的處理函數。
特點
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>
);
}
不受控制的元件：React 元件，其中 DOM 本身處理表單元素的狀態。 React 透過 ref 存取輸入值，ref 在內部儲存自己的狀態，並且您可以在需要時使用 ref 查詢 DOM 以查找其當前值。這有點像傳統的 HTML。
特點
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>
);
}
這是受控組件和非受控組件之間的比較表：
何時使用
受控 - 用於即時驗證、輸入格式或即時回饋。
不受控制 - 用於簡單的用例，例如檔案上傳預先填寫的表單值不頻繁或需要延遲到表單提交。
以上是React 中的受控元件與非受控元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
