Solo tienes que mover los accesorios onChange después de {...register(...)}

 const productImageField = register("productImage", { required: true }); return ( <input className="form-control" type="file" {...productImageField} onChange={(e) => { productImageField.onChange(e); handleImageUpload(e); }} /> )

(3 de diciembre de 2021) editar: este enfoque ya no es correcto desde los cambios de react-hook-form v7.16.0 , consulte la respuesta de @Bill.

Enfrenté un problema similar recientemente al migrar a V7. Si puede ayudar a alguien.

Un componente principal que manejaba el formulario pasaba a un envoltorio la función de registro, el envoltorio la pasaba de nuevo a una entrada que necesitaba eliminar los cambios.

Llamé al formLibraryRef de registroLibraryRef en caso de que quisiera usar una biblioteca diferente más tarde, pero en general tenía que hacer algo como:

const { onChange, ...rest } = formLibraryRef(inputName);

pase onChange a la función que se pasa al evento onChange nativo de la entrada:

 const handleDebouncedChange: (event: React.ChangeEvent<HTMLInputElement>) => void = ( event: ChangeEvent<HTMLInputElement>, ) => { onChange(event); if (preCallback) { preCallback(); } debounceInput(event); };

y luego pasar el resto a la entrada:

 <input aria-label={inputName} name={inputName} data-testid={dataTestId} className={`form-control ...${classNames}`} id={inputId} onChange={handleDebouncedChange} onFocus={onFocus} placeholder={I18n.t(placeholder)} {...rest} />

La sección de register en los documentos aquí: https://react-hook-form.com/migrate-v6-to-v7/ brinda un poco más de información sobre cómo obtener onChange y muestra un ejemplo de Missing ref .

Para mí, la solución de decoración funcionó.

 const fieldRegister = register("productImage", {required: true}) const origOnChange = fieldRegister.onChange fieldRegister.onChange = (e) => { const res = origOnChange(e) const value = e.target.value // do something with value return res }

Para uso de declaración de campo

 <input {...fieldRegister}/>

En la documentación de register https://react-hook-form.com/api/useform/register , existe una muestra en Custom onChange, onBlur :

 // onChange got overwrite by register method <input onChange={handleChange} {...register('test')} /> // register's onChange got overwrite by register method <input {...register('test')} onChange={handleChange}/> const firstName = register('firstName', { required: true }) <input onChange={(e) => { firstName.onChange(e); // method from hook form register handleChange(e); // your method }} onBlur={firstName.onBlur} ref={firstName.ref} />

Entonces para tu caso:

 const productImageRegister = register("productImage", {required: true}) <input className="form-control" type="file" {...productImageRegister } onChange={e => { productImageRegister.onChange(e); handleImageUpload(e); }} />

https://github.com/react-hook-form/react-hook-form/releases/tag/v7.16.0

V7.16.0 ha introducido esta nueva API para onChange personalizado.

 <input type="text" {...register('test', { onChange: (e) => {}, onBlur: (e) => {}, })} />

Estaba atrapado con el mismo problema. Para mí, el problema era que mi onChange estaba por encima del {... registro} del formulario de gancho de reacción y moverlo debajo del registro resolvió el problema para mí.