React Hook Form 7.0版本如何在注册输入框时添加自定义onChange事件

为什么不能直接写onChange #

v7版本对register的返回逻辑做了调整：register()不再是通过ref挂载事件，而是直接返回包含onChange、onBlur、ref在内的全套原生表单绑定属性。如果你直接在输入元素上写onChange={handleImageUpload}，JSX的属性合并规则会让你手写的onChange直接覆盖掉register返回的同名事件，最终导致RHF无法同步文件输入的状态、设置的required校验完全失效。

正确写法 #

直接把自定义的上传逻辑和register返回的原生onChange做串联，不要硬覆盖：

const { register } = useForm();
// 提前取出productImage字段的register绑定配置
const imageRegister = register('productImage', { required: true });

<input
  className="form-control"
  type="file"
  {...imageRegister}
  onChange={(e) => {
    // 先执行RHF内置的状态同步逻辑，保证表单值能被正常收集
    imageRegister.onChange(e);
    // 再执行你原本写好的handleImageUpload自定义上传逻辑
    handleImageUpload(e);
  }}
/>

灵活适配业务场景 #

• 执行顺序可以根据需求调换：如果需要在自定义逻辑中拿到RHF同步后的最新表单值，就先调用RHF的onChange；如果需要先对上传的文件做前置校验（比如限制文件大小、校验文件格式、压缩图片尺寸），可以先执行自定义校验逻辑，通过后再调用RHF的onChange同步状态。
• 如果自定义逻辑判定文件不符合上传要求、需要阻止RHF收集该值，直接在自定义逻辑分支return，不调用后续的imageRegister.onChange(e)即可。

和v6写法的核心差异 #

v6版本是将register通过ref绑定到输入元素上，单独写自定义onChange不会和RHF的内置逻辑产生冲突；v7调整为展开register返回的所有绑定属性后，手动声明的同名事件会直接覆盖原有逻辑，必须做逻辑串联才能保证两边的逻辑都正常运行。

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