React Hook Form中errors始终为空问题求助（已设mode: 'onBlur'）

以下是针对性的修复思路和代码调整方案：

1. 补全Controller的onBlur事件绑定 #

你的TextInput组件中，Controller的render函数只解构了onChange和value，没有绑定onBlur到Input组件。RHF的onBlur验证模式依赖字段的blur事件触发，缺失这个绑定会导致验证逻辑不执行，进而errors无法更新。

修改Input的属性，添加onBlur绑定：

<Input
  type={type}
  autoComplete={autoComplete}
  onChange={onChange}
  onBlur={onBlur} // 新增：绑定Controller的onBlur事件
  label={label}
  variant='filled'
  value={value || ''}
/>

2. 将required属性同步到RHF验证规则 #

目前你只是在组件中渲染了必填标记*，但没有把required规则添加到Controller的rules里。RHF不会自动识别组件的required属性，必须显式加入验证规则才能触发必填校验。

在TextInput组件中合并required规则：

// 初始化rules时合并required规则
const rules = {
  ...(required ? { required: 'This field is required' } : {}),
};

if (type === 'password') {
  rules['minLength'] = {
    value: 8,
    message: 'Must contain at least 8 characters', // 显式设置错误提示
  };
}

3. 使用Controller内置的fieldState.error显示错误 #

父组件传递的errors可能存在更新延迟，而Controller的fieldState.error是字段级别的实时错误状态，更可靠。直接使用这个错误对象来显示提示，无需依赖父组件传递的errors。

修改错误显示逻辑：

// 替换原有的{errors && <FormFeedback>{errors}</FormFeedback>}
{error && <FormFeedback>{error.message}</FormFeedback>}

同时可以移除父组件中传递的errors属性，简化调用：

<TextInput
  name='password'
  label='Create Password'
  type='password'
  control={control}
  required={true}
  helperText='Must contain at least 8 characters'
/>

完成以上调整后，当输入框失去焦点时，RHF会触发验证，errors对象会正确更新，错误提示也能正常显示。

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