React 传统表单的缺陷 & React Hook Form 的核心优势

// 传统受控组件的冗余代码示例
import { useState } from 'react';
function LoginForm() {
  // 每个字段都要声明state，字段越多，state越多
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');

  // 每个字段都要写onChange，或写一个公共的handleChange还要做字段判断
  const handleUsernameChange = (e) => setUsername(e.target.value);
  const handlePasswordChange = (e) => setPassword(e.target.value);
  const handleEmailChange = (e) => setEmail(e.target.value);

  const submit = () => {
    const formData = { username, password, email, phone };
    console.log(formData);
  };

  return (
    <form onSubmit={submit}>
      <input value={username} onChange={handleUsernameChange} name="username" />
      <input value={password} onChange={handlePasswordChange} name="password" type="password" />
      {/* 更多表单项... */}
    </form>
  );
}

// React Hook Form 极简写法（对比上面的传统代码）
import { useForm } from 'react-hook-form';
function LoginForm() {
  const { register, handleSubmit } = useForm();
  // 提交时直接拿到完整的表单数据，无需手动组装
  const submit = (formData) => {
    console.log(formData); // {username: 'xxx', password: 'xxx', email: 'xxx'}
  };

  return (
    <form onSubmit={handleSubmit(submit)}>
      {/* 一行代码注册字段，无state、无onChange */}
      <input {...register('username')} />
      <input {...register('password')} type="password" />
      <input {...register('email')} />
    </form>
  );
}

const { register, handleSubmit, formState: { errors } } = useForm();
const submit = (data) => console.log(data);

return (
  <form onSubmit={handleSubmit(submit)}>
    {/* 注册字段+校验规则：必填+最小长度3 */}
    <input {...register('username', { 
      required: '用户名不能为空', 
      minLength: { value: 3, message: '用户名至少3个字符' } 
    })} />
    {/* 展示校验错误信息 */}
    {errors.username && <p style={{color:'red'}}>{errors.username.message}</p>}

    {/* 密码：必填+正则（6-20位字母数字） */}
    <input {...register('password', {
      required: '密码不能为空',
      pattern: { value: /^[a-zA-Z0-9]{6,20}$/, message: '密码格式错误' }
    })} type="password" />
    {errors.password && <p style={{color:'red'}}>{errors.password.message}</p>}

    <button type="submit">提交</button>
  </form>
);

import { useForm } from 'react-hook-form';
function EditUserForm() {
  // 传入初始值，自动回填到表单中
  const { register, handleSubmit, reset, formState: { errors } } = useForm({
    defaultValues: { username: '张三', email: 'zhangsan@test.com' }
  });

  const submit = (data) => {
    console.log('提交的表单数据：', data);
    // 提交成功后，一键重置表单为初始值
    reset();
  };

  return (
    <form onSubmit={handleSubmit(submit)}>
      <input {...register('username', { required: '必填' })} />
      <input {...register('email', { required: '必填', pattern: /^[\w-]+@[a-zA-Z0-9]+\.[a-zA-Z]+$/ })} />
      <button type="submit">提交</button>
      <button type="button" onClick={() => reset()}>重置</button>
    </form>
  );
}

import { useForm, watch } from 'react-hook-form';
function LinkageForm() {
  const { register, handleSubmit } = useForm();
  // 监听「省份」字段的变化，实现联动
  const province = watch('province');
  const submit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(submit)}>
      <select {...register('province')}>
        <option value="zj">浙江</option>
        <option value="gd">广东</option>
      </select>
      {/* 联动展示城市：根据省份动态渲染 */}
      {province === 'zj' && <input {...register('city')} placeholder="请输入浙江城市" />}
      {province === 'gd' && <input {...register('city')} placeholder="请输入广东城市" />}
      <button type="submit">提交</button>
    </form>
  );
}

// 父组件：提供表单上下文
import { useForm, FormProvider } from 'react-hook-form';
import ChildInput from './ChildInput';

function ParentForm() {
  const methods = useForm();
  const submit = (data) => console.log(data);
  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(submit)}>
        {/* 子组件，无需传任何props */}
        <ChildInput />
        <button type="submit">提交</button>
      </form>
    </FormProvider>
  );
}

// 子组件：直接消费上下文，注册字段
import { useFormContext } from 'react-hook-form';
export default function ChildInput() {
  const { register } = useFormContext();
  return <input {...register('username')} placeholder="用户名" />;
}