React Hook Form单输入框传值时触发字段验证问题

我用 react-hook-form 实现了一个多页面复杂表单，表单提供者的配置如下：

const methods = useForm<formType>({
  resolver: zodResolver(formZod),
  mode: "onBlur",
  defaultValues: formDefaults,
});

现在需要针对最后一个邮箱字段，在 onChange 事件触发时单独验证该字段。字段的组件写法如下：

<TypedInput
  type="email"
  name="summary.email"
  placeholder="Input email here"
/>

其中 <TypedInput> 是 Controller 的封装组件，最终会映射到原生 HTML <input> 标签，支持所有原生输入属性。

我尝试过用 onChange 处理器，通过 useFormContext() 中的 trigger() 函数触发验证，但输入框的值无法同步到表单状态里，示例代码如下：

const { trigger } = useFormContext<formType>();

const validateEmail = (e) => {
  trigger("summary.email");
}

/* component */
<TypedInput
  type="email"
  name="summary.email"
  placeholder="Input email here"
  onChange((e) => validateEmail(e))
/>

解决方案 #

问题根源是你覆盖了字段的 onChange 逻辑，但没有调用 React Hook Form 内置的表单值更新方法，导致输入值无法同步到表单状态。以下是三种可行的解决方式：

方法一：保留内置更新逻辑再触发验证 #

因为 <TypedInput> 是 Controller 的封装，它的 onChange 通常会接收内置的更新回调。你需要先调用该回调同步表单值，再触发验证：

const { trigger } = useFormContext<formType>();

<TypedInput
  type="email"
  name="summary.email"
  placeholder="Input email here"
  onChange={(e, onChange) => {
    // 先调用内置回调更新表单值
    onChange(e.target.value);
    // 再触发当前字段的验证
    trigger("summary.email");
  }}
/>

注：如果你的 <TypedInput> 封装时将 Controller 的 onChange 作为参数传递（或通过 props 暴露），这种方式就能保证值先同步再验证。

方法二：通过 watch 监听字段变化触发验证 #

无需修改 onChange，直接用 watch 监听邮箱字段的变化，值改变时自动触发验证：

import { useFormContext, watch } from "react-hook-form";

const { trigger } = useFormContext<formType>();
const emailValue = watch("summary.email");

// 监听值变化触发验证
useEffect(() => {
  // 可选：空值时跳过验证
  if (emailValue) {
    trigger("summary.email");
  }
}, [emailValue, trigger]);

// 组件无需额外 onChange 配置
<TypedInput
  type="email"
  name="summary.email"
  placeholder="Input email here"
/>

这种方式更贴合 React Hook Form 的设计逻辑，不需要修改组件的事件处理。

方法三：单独设置字段的验证模式 #

如果仅需该邮箱字段在 onChange 时验证，其他字段保持 onBlur 模式，可以直接在字段配置中单独指定验证模式：

const { control } = useFormContext<formType>();

<TypedInput
  type="email"
  name="summary.email"
  placeholder="Input email here"
  control={control}
  rules={{
    mode: "onChange" // 为当前字段单独设置验证触发时机
  }}
/>

这种方式最简洁，直接利用 React Hook Form 提供的字段级配置，无需手动调用 trigger。

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