18. 受控组件

本节目标：掌握受控组件的写法，让 React state 成为表单数据的唯一来源。

什么是受控组件

受控组件（Controlled Component）就是值由 React state 驱动的表单元素。用户输入触发 onChange，更新 state，state 又回填到输入框。

function NameForm() {
  const [name, setName] = useState('');

  return (
    <input
      value={name}
      onChange={e => setName(e.target.value)}
    />
  );
}

数据流是闭环的：state → value → 用户输入 → onChange → state。

非受控组件对比

非受控组件的值由 DOM 自己管理，React 不管。用 ref 去读：

function NameForm() {
  const inputRef = useRef(null);

  function handleSubmit() {
    console.log(inputRef.current.value);
  }

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

什么时候用非受控

文件上传 <input type="file"> 只能用非受控。其他场景推荐受控，数据在 React 手里更好管控。

input 的受控写法

最常见的场景：

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    console.log({ username, password });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        placeholder="用户名"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <button type="submit">登录</button>
    </form>
  );
}

textarea 也是同样的套路

function Editor() {
  const [content, setContent] = useState('');

  return (
    <textarea
      value={content}
      onChange={e => setContent(e.target.value)}
      rows={6}
    />
  );
}

React 的 textarea

React 里 <textarea> 用 value 属性设值，不像 HTML 那样写在标签之间。

select 下拉框

function CitySelect() {
  const [city, setCity] = useState('beijing');

  return (
    <select value={city} onChange={e => setCity(e.target.value)}>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="guangzhou">广州</option>
    </select>
  );
}

同样用 value + onChange，和 input 一个模式。

复选框和单选框

function Form() {
  const [agree, setAgree] = useState(false);
  const [gender, setGender] = useState('male');

  return (
    <form>
      <label>
        <input
          type="checkbox"
          checked={agree}
          onChange={e => setAgree(e.target.checked)}
        />
        同意协议
      </label>

      <label>
        <input
          type="radio"
          name="gender"
          value="male"
          checked={gender === 'male'}
          onChange={e => setGender(e.target.value)}
        />
        男
      </label>
      <label>
        <input
          type="radio"
          name="gender"
          value="female"
          checked={gender === 'female'}
          onChange={e => setGender(e.target.value)}
        />
        女
      </label>
    </form>
  );
}

注意复选框用 checked 而不是 value。

受控组件的好处

即时校验：每次输入都能拿到最新值，可以做实时校验
条件禁用：根据状态控制按钮是否可点
重置表单：直接 setState 就能清空
格式化输入：可以在 onChange 里做格式处理

function PhoneInput() {
  const [phone, setPhone] = useState('');

  function handleChange(e) {
    const raw = e.target.value.replace(/\D/g, ''); // 只保留数字
    setPhone(raw.slice(0, 11)); // 最多 11 位
  }

  return <input value={phone} onChange={handleChange} placeholder="手机号" />;
}

本节要点

受控组件：value 由 state 驱动，onChange 更新 state
input、textarea、select 都用 value + onChange
复选框用 checked + onChange
受控让表单数据完全在 React 掌控中