How to submit a form using Enter key in react.js?

Question

Here is my form and the onClick method. I would like to execute this method when the Enter button of keyboard is pressed. How ?

N.B: No jquery is appreciated.

Answer 1

import React , {useEffect , useRef } from 'react' ; 

function Example() {

 let inp = useRef() 
 useEffect(()=>{ 
   if (!inp && !inp.current) return 
   inp.current.focus() ; 
   return () => inp = null ;  
 });
 
 const handleSubmit = () => { 
    //...  
 }

 return ( 
    
 {                                       
      e.preventDefault();                                       
      handleSubmit(e);                               
        }}                                                        > 
        
          
            submit
         
    
 )
}

enter code heresometimes in popus it would not work to binding just a form and passing the onSubmit to the form because form may not have any input . in this cases if you bind the event to the document by doing document.addEventListener it will be cause problem in another parts of the application on count of this for solving thiis issue we should wrapp a form and should put a input with that is hidden by css .. then you foucus on that input by ref it will be work currectly .