受控组件与非受控组件

// 受控：值在 state 里，每键都流经 React
const [name, setName] = useState("");
<input value={name} onChange={(e) => setName(e.target.value)} />

// 非受控：值在 DOM 里，React 只留一张「取件码」（第 12 篇）
const nameRef = useRef<HTMLInputElement>(null);
<input defaultValue="" ref={nameRef} />

import { useState } from "react";

function LoginForm() {
  // 表单即 state：唯一数据源
  const [form, setForm] = useState({ email: "", password: "" });

  // 校验是 state 的派生值：state 一变自动重算，无需单独存储
  const emailInvalid = form.email !== "" && !form.email.includes("@");

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      if (emailInvalid) return;
      console.log("提交", form);  // 直接拿 state，全程不碰 DOM
    }}>
      <input
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
      />
      {emailInvalid && <p>邮箱格式不对</p>}  // 即时反馈
      <input
        type="password"
        value={form.password}
        onChange={(e) => setForm({ ...form, password: e.target.value })}
      />
      <button disabled={!form.email || !form.password}>登录</button>
    </form>
  );
}

// checkbox：用 checked 管（不是 value），取 e.target.checked
<input type="checkbox" checked={agree}
  onChange={(e) => setAgree(e.target.checked)} />

// radio：一组框共享一份 state，靠各自 value 判断谁被选中
<input type="radio" checked={pay === "wechat"} onChange={() => setPay("wechat")} />
<input type="radio" checked={pay === "alipay"} onChange={() => setPay("alipay")} />

// select：value 挂在 <select> 标签上，不是 <option> 上
<select value={city} onChange={(e) => setCity(e.target.value)}>
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>

import { useRef, type FormEvent } from "react";

function RegisterForm() {
  const emailRef = useRef<HTMLInputElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    // 此刻才伸手拿值——此前敲了什么，React 全程不知情
    const email = emailRef.current?.value ?? "";
    const file = fileRef.current?.files?.[0] ?? null;
    console.log("提交", { email, file });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} defaultValue="me@example.com" />
      <input ref={fileRef} type="file" />
      <button>注册</button>
    </form>
  );
}

function ResetBug() {
  const [draft, setDraft] = useState("初始草稿");
  return (
    <>
      <input defaultValue={draft} />  // draft 变了，输入框却纹丝不动
      <button onClick={() => setDraft("")}>重置</button>
    </>
  );
}

import { useForm } from "react-hook-form";

interface LoginForm { email: string; password: string; }

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<LoginForm>();

  return (
    <form onSubmit={handleSubmit((values) => console.log(values))}>
      <input {...register("email", {
        required: "邮箱必填",
        pattern: { value: /@/, message: "格式不对" },
      })} />
      {errors.email && <p>{errors.email.message}</p>}
      <input type="password" {...register("password", { required: true })} />
      <button>登录</button>
    </form>
  );
}