React Hook Form如何实现提交后触发onChange验证（无需依赖isSubmitted）

你可以通过配置 useForm 的 mode 和 reValidateMode 参数来实现需求，无需手动依赖 isSubmitted 状态：

1. 参数作用说明

   • mode: "onSubmit"：设置表单仅在提交动作触发时执行首次验证，提交前字段变更不会触发验证。
   • reValidateMode: "onChange"：指定表单提交后，任何字段发生变更时自动重新验证，正好满足提交后每次变更都验证的需求。

2. 修改后的代码

   const {
     setValue,
     getValues,
   } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: {
       customFields: []
     },
     mode: "onSubmit",
     reValidateMode: "onChange",
   });
   

   对应的JSX部分可以移除手动控制的shouldValidate选项，由React Hook Form自动处理验证逻辑：

   <CustomFields
     fields={getValues('customFields')}
     keysOnly
     onChange={(fields) => {
       setValue('customFields', fields, {
         shouldDirty: true,
         // 无需再手动设置shouldValidate
       });
     }}/>
   

这个方案完全利用React Hook Form的内置配置实现需求，不需要额外维护isSubmitted状态的判断逻辑，逻辑更简洁且符合库的设计规范。

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