全书目录

第一篇：React 完全指南 —— 空调宇宙

第十七章：表单 —— 空调控制面板输入系统

1 分钟 178 字 第 39 / 962 个阅读单元

React 里输入框不是“随便写就行”。一旦有表单，你就会遇到受控组件和非受控组件。

#1. 受控组件 —— 面板完全由主控板管理
tsx
function TempForm() {
  const [temp, setTemp] = useState('26');

  return (
    <input
      value={temp}
      onChange={(e) => setTemp(e.target.value)}
    />
  );
}
#2. 非受控组件 —— 面板自己记，主控板偶尔去读
tsx
function TempForm() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = () => {
    alert(inputRef.current?.value);
  };

  return (
    <>
      <input ref={inputRef} defaultValue="26" />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
}

受控 vs 非受控：

受控 非受控
数据放哪 React state DOM 自己
适合 联动复杂、实时校验 简单输入、一次性读取
类比 中央控制面板 现场独立旋钮