React hook form: How to can I use onChange on React Hook Form Version 7.0

user_15547541 0
Viewed 47203

Previously I used to write like this:

<input className="form-control" name="productImage" type='file' onChange={handleImageUpload} ref={register({ required: true })} />

After the update I have to write like this:

<input className="form-control" type="file" {...register('productImage', { required: true })} />

How do I use onChange={handleImageUpload} on the updated version of React Hook Form? Here is the migration docs

Please pardon my mistakes in the manner of asking the question. I'm new to these things. Thank you.

react-hook-form reactjs javascript
6 Answers
user_4092750

You just have to move the onChange props after {...register(...)}

const productImageField = register("productImage", { required: true });

return (
    <input
        className="form-control"
        type="file"
        {...productImageField}
        onChange={(e) => {
          productImageField.onChange(e);
          handleImageUpload(e);
     }}
    />
)

(Dec 3 2021) edit: this approach is no longer correct since react-hook-form v7.16.0's changes, see @Bill's answer.

user_49730760

In register documentation https://react-hook-form.com/api/useform/register, sample exists on Custom onChange, onBlur section :

// 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} 
/>

So for your case :

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

Was stuck with the same problem. For me the problem was that my onChange was above the react-hook-form's {...register} and moving it below the register solved the problem for me!!

user_154084660

For me, decoration solution worked

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
}

For field declaration use

<input {...fieldRegister}/>
user_18482780

I faced a similar issue recently when migrating to V7. If it can help anybody.

A parent component handling the form was passing down to a wrapper the register function, the wrapper passing it down again to an input that needed debouncing on change.

I called the register formLibraryRef in case I wanted to use a different library later but overall I had to do something like:

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

pass the onChange to the function that is itself passed to the native onChange event of the input:

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

and then pass the rest to the input:

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

The register section in the docs here: https://react-hook-form.com/migrate-v6-to-v7/ gives a bit more info on how to get the onChange and shows an example for Missing ref.

user_112872660
Related