Let's assume that you have the following form in React with 3 inputs:
jsximport React from 'react'; const Form = () => { return( <form> <input autoFocus = {true}></input> <input></input> <input></input> </form> ); } export default Form;
If we want the focus to move to the next input after the user types a number:
jsximport React from 'react'; const Form = () => { const handleFocus = (e) => { if(e.target.nextSibling) e.target.nextSibling.focus(); } return( <form> <input onChange = {handleFocus} autoFocus = {true}></input> <input onChange = {handleFocus}></input> <input onChange = {handleFocus}></input> </form> ); } export default Form;
Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.