How to submit a form on input field onBlur event in ReactJS?

Question

I have multiple form in a Screen. Need to submit form while onBlur event calling without using ref, because i have multiple and dynamic forms.

Answer 1

You may add onBlur event, get access to DOM-element Form and then do submit 'form.submit()':

const myForm = () =>
    <input onBlur={(e) => {
  // if click occurs outside of element
      if(!e.relatedTarget || (e.target.form !== e.activeTarget)) 
  //attention: your page will reload every such instant submission
        e.target.form.submit();
      }
    }} ... (other props) >
    ...
 </form>

Or you need to use

<form onSubmit={(e) => {
             e.preventDefault();
             ...
}>
    <input onBlur={(e) => {
             ...
             e.target.form.requestSubmit();
    } />
        
...

the detail of this solution are here Here is my question