React Hook Form 中如何动态控制字段的 required 状态？

柯一 Dev 提问于 2026-03-31 14:04:14 阅读 4

交互

我在用 React Hook Form 做一个表单，有个下拉选项会影响另一个输入框是否必填。我试过用 watch() 监听下拉值，然后在 useEffect 里调用 trigger()，但 required 规则好像没更新。

比如当选择“其他”时，下面的备注框才需要必填。现在的问题是，即使我动态改了 required 的值，表单验证还是按初始状态走，根本没变。是不是我用错了方法？

const { register, watch, trigger, formState: { errors } } = useForm();
const type = watch('type');

// 在 JSX 里这样写
<input {...register('remark', { required: type === 'other' })} />

Redux 组件设计表单交互

我来解答赞 0 收藏

反馈

1 条解答

技术星瑶 Lv1

在 React Hook Form 里动态控制 required 状态，直接用 setValue 更新字段的规则不太靠谱。建议把条件验证逻辑写在 validate 函数里，这样每次输入都会重新计算

const { register, watch } = useForm();

const type = watch('type');



<input {...register('remark', {

  validate: (value) => (type === 'other' && !value ? '必填' : true)

})} />

差不多就行，这方法我试过好使。别再折腾 trigger 了，太累人。

2026-03-31 14:05