这归结为输入值的真实来源是谁 — 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 警告。