这归结为输入值的真实来源是谁 — React state 还是 DOM 本身。
为什么这很重要
受控(React 拥有值)
输入的 value 由 state 驱动,onChange 保持 state 同步。DOM 始终反映 React:
jsx
const [name, setName] = useState("");
<input
value={name} // value comes FROM state
onChange={e => setName(e.target.value)} // every keystroke updates state
/>
由于 state 是真实来源,您可以在每次按键时验证、格式化或转换(例如强制大写、限制长度、禁用提交按钮)。
非受控(DOM 拥有值)
浏览器保持该值;您仅在需要时通过 ref 读取它:
jsx
const inputRef = useRef(null);
<input defaultValue="" ref={inputRef} />;
// on submit: const value = inputRef.current.value;
何时使用哪种
- 受控:大多数表单 — 您获得验证、条件 UI 和单一真实来源。缺点是每次按键都会重新渲染(通常可以忽略不计)。
- 非受控:简单表单、文件输入(
<input type="file">始终是非受控的)或集成非 React 小部件。代码更少,但您无法对发生的更改做出实时反应。
混合使用(同时传递 value 和 defaultValue)是一个常见错误,会触发 React 警告。
