React Hook Form无法注册值，始终返回undefined问题求助

你的问题核心在于自定义Input组件没有正确接收并传递React Hook Form的register返回的属性，导致表单无法追踪输入框的值，进而触发必填校验错误，watch也无法获取到值。

具体原因： #

1. 你在Input组件的props中显式声明了value和onChange，并直接绑定到原生<input>标签上。但register('email')会返回包含onChange、onBlur、value等属性的对象，当你通过{...register('email')}传递给Input组件时，这些属性会被组件自身显式声明的value和onChange覆盖（组件props优先级更高），导致React Hook Form无法控制输入框状态。
2. 原生<input>标签缺少register返回的onBlur属性，这会影响表单的实时校验逻辑。

修复方案： #

修改Input组件，通过剩余参数接收所有未显式声明的input属性，然后传递给原生<input>，同时移除对value和onChange的显式绑定（让register来控制这些属性）：

// 修改后的Input组件
const Input: React.FC<InputProps> = ({
  size = 'md',
  type = 'text',
  className,
  inputClassName,
  placeholder,
  label,
  disabled,
  required = false,
  errorMessage,
  leftIcon,
  // 移除显式的value和onChange，改用rest参数接收剩余属性
  ...rest
}) => {
  return (
    <div className={clsx('relative', className && className)}>
      {label && (
        <label
          htmlFor={rest.name} // 使用rest中的name属性
          className="font-body mb-1 block text-xs font-medium font-medium uppercase text-gray-500"
        >
          {label}
        </label>
      )}
      <input
        type={type}
        id={rest.name} // 使用rest中的name属性
        placeholder={placeholder}
        required={required}
        disabled={disabled}
        {...rest} // 传递所有register返回的属性（包括onChange、onBlur、value、name等）
        className={inputClassName}
      />
      <p className='text-red-error text-sm'>{errorMessage}</p>
    </div>
  )
}

// 对应的InputProps类型也需要调整，移除value和onChange的强制声明
type InputProps = {
  size?: 'md' | 'sm';
  type?: string;
  className?: string;
  inputClassName?: string;
  placeholder?: string;
  label?: string;
  disabled?: boolean;
  required?: boolean;
  errorMessage?: string;
  leftIcon?: React.ReactNode;
  // 允许其他input相关属性
  [key: string]: any;
}

额外说明： #

• 修改后，register返回的所有控制属性都会正确绑定到原生输入框，React Hook Form就能正常追踪输入值、执行校验，watch也能返回正确结果。
• 确保RegistrationFormData类型与zod schema结构一致，避免类型不匹配导致的隐性问题。

内容的提问来源于stack exchange，提问作者unicorn_surprise