const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [errors, setErrors] = useState({});
const [touched, setTouched] = useState({});

const handleEmailChange = (e) => setEmail(e.target.value);
const handlePasswordChange = (e) => setPassword(e.target.value);
// ...每个字段都要写类似的处理函数

const handleBlur = (field) => {
  setTouched({ ...touched, [field]: true });
  // 验证逻辑
};

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState({});

const handleSubmit = (e) => {
  e.preventDefault();
  const newErrors = {};
  
  if (!email.includes('@')) {
    newErrors.email = '邮箱格式不正确';
  }
  if (password.length < 8) {
    newErrors.password = '密码至少8个字符';
  }
  
  setErrors(newErrors);
  
  if (Object.keys(newErrors).length === 0) {
    console.log('提交成功', { email, password });
  }
};

return (
  <form onSubmit={handleSubmit}>
    <input
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="邮箱"
    />
    {errors.email && <p className="error">{errors.email}</p>}
    
    <input
      type="password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      placeholder="密码"
    />
    {errors.password && <p className="error">{errors.password}</p>}
    
    <button type="submit">注册</button>
  </form>
);

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

export function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm({
    mode: 'onBlur'  // 失焦时验证，不是每次输入
  });

  const onSubmit = async (data) => {
    const response = await fetch('/api/signup', {
      method: 'POST',
      body: JSON.stringify(data),
    });
    console.log('注册成功');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="form-group">
        <label htmlFor="email">邮箱</label>
        <input
          id="email"
          placeholder="你的邮箱"
          {...register('email', {
            required: '邮箱不能为空',
            pattern: {
              value: /^\S+@\S+$/i,
              message: '邮箱格式不正确'
            }
          })}
        />
        {errors.email && (
          <p className="error">{errors.email.message}</p>
        )}
      </div>

      <div className="form-group">
        <label htmlFor="password">密码</label>
        <input
          id="password"
          type="password"
          placeholder="至少8个字符"
          {...register('password', {
            required: '密码不能为空',
            minLength: {
              value: 8,
              message: '密码至少8个字符'
            }
          })}
        />
        {errors.password && (
          <p className="error">{errors.password.message}</p>
        )}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '注册中...' : '注册'}
      </button>
    </form>
  );
}

import { Controller } from 'react-hook-form';
import { Select } from '@chakra-ui/react';

export function CountryForm() {
  const { control, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      {/* 普通输入框 - 不受控 */}
      <input {...register('name')} placeholder="姓名" />

      {/* 第三方选择器 - 用Controller包装 */}
      <Controller
        name="country"
        control={control}
        render={({ field }) => (
          <Select {...field} placeholder="选择国家">
            <option value="cn">中国</option>
            <option value="us">美国</option>
            <option value="jp">日本</option>
          </Select>
        )}
      />

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