表单与受控组件

这一课你将能做到

1. 写出受控输入：value + onChange
2. 提交时做空值校验，并在保存中禁用按钮
3. 理解受控相对「输入框自己握值」的好处

为什么要学

本站「留一句」「登录框」都是表单。
受控组件人话：输入框显示什么，完全由 React state 说了算；每次敲键盘都更新 state。

好处：随时能校验、数还剩多少字、禁用提交、把值交给父组件去调 API。
坏处：每个键都触发渲染——对留言框完全可接受。

对照：非受控是输入框自己握值，React 用 defaultValue 给初值，提交时再去读 DOM。特殊场景才用；本课以受控为主。

先建立图像

键盘输入 → onChange → setState → 重新渲染 → input 的 value 来自 state
单一数据源在 React，不在 DOM

少了 onChange 却写了 value：框会锁死，敲不了字。这是入门第一现场。

跟着做

步骤 1：受控留言（对齐离开页思路）

import { useState } from "react";

export function LeaveNote({ onSave }) {
  const [note, setNote] = useState("");
  const [saving, setSaving] = useState(false);

  async function save() {
    const text = note.trim();
    if (!text || saving) return;
    setSaving(true);
    try {
      await onSave(text); // 父组件去调 API
      setNote("");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div>
      <label>
        留一句
        <textarea
          value={note}
          maxLength={500}
          onChange={(e) => setNote(e.target.value)}
        />
      </label>
      <p>还可写 {500 - note.length} 字</p>
      <button type="button" disabled={!note.trim() || saving} onClick={save}>
        {saving ? "保存中…" : "离开本站"}
      </button>
    </div>
  );
}

对照：trim 后空格不算内容；保存中 disabled 防双份请求；成功后清空。

步骤 2：checkbox 用 checked

function Agree({ on, onChange }) {
  return (
    <label>
      <input
        type="checkbox"
        checked={on}
        onChange={(e) => onChange(e.target.checked)}
      />
      我已阅读
    </label>
  );
}

不要用 value 表示勾选。

步骤 3：多字段（字段少时多个 useState 更直观）

const [name, setName] = useState("");
const [email, setEmail] = useState("");

字段很多再考虑一个对象 + 按 name 更新。入门别先上表单库。

步骤 4：了解非受控

<input defaultValue="初始" />

没有全程 value/onChange。要读值可用 ref。文件上传 通常只能非受控。