I'd need to add custom handler in the onChange event of a checkbox, however, doing so onChange won't reflect to react-hook-form.

I've followed the instructions how to do custom onChange by following the chapter

Custom onChange, onBlur: ​ /

However cannot make it work.

Seeing in the DevTool the first checkbox change reflects to form just fine however the latter with a custom handler does not.

...
const subscribeToNewsLetter = register('subscribeToNewsLetter')
...
<div>
  ​<label> I consent </label>
  ​<input            
    ​type="checkbox"
    ​{...register('consent')}  //This checkbox without any custom handler works fine
  ​/>
​</div>

​<div>
  ​<label>Subscribe to newsletter</label>
  ​<input            
    ​type="checkbox"
    ​onChange={(e) => {
      ​subscribeToNewsLetter.onChange(e); // This needs to do custom stuff in onChange
      ​handleChange(e);         // However doing so 
    ​}}                         // the change is not registered to hook-form
    ​onBlur={subscibeToNewLetter.onBlur}
    ​ref={subscibeToNewLetter.ref} 
  ​/>
</div>
...

I've been fiddling it here which illustrates the problem the best.

I'd need to add custom handler in the onChange event of a checkbox, however, doing so onChange won't reflect to react-hook-form.

I've followed the instructions how to do custom onChange by following the chapter

Custom onChange, onBlur: ​ https://react-hook-form./api/useform/register/

However cannot make it work.

Seeing in the DevTool the first checkbox change reflects to form just fine however the latter with a custom handler does not.

...
const subscribeToNewsLetter = register('subscribeToNewsLetter')
...
<div>
  ​<label> I consent </label>
  ​<input            
    ​type="checkbox"
    ​{...register('consent')}  //This checkbox without any custom handler works fine
  ​/>
​</div>

​<div>
  ​<label>Subscribe to newsletter</label>
  ​<input            
    ​type="checkbox"
    ​onChange={(e) => {
      ​subscribeToNewsLetter.onChange(e); // This needs to do custom stuff in onChange
      ​handleChange(e);         // However doing so 
    ​}}                         // the change is not registered to hook-form
    ​onBlur={subscibeToNewLetter.onBlur}
    ​ref={subscibeToNewLetter.ref} 
  ​/>
</div>
...

I've been fiddling it here which illustrates the problem the best. https://stackblitz./edit/react-hook-form-fiddling-zlnhzs

• javascript
• reactjs
• react-hook-form

Share Improve this question Follow asked Aug 5, 2021 at 6:06 anmatikaanmatika 1,72166 gold badges2323 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You've to update the input like that:

<input
  type="checkbox"
  {...subscibeToNewLetter}
  onChange={e => {
    subscibeToNewLetter.onChange(e);
    handleChange(e);
  }}
/>