Así que estoy creando una especie de aplicación tipo ahorcado en la que mezclo una oración y el usuario tiene que adivinar la oración. Hay múltiples campos de entrada que están restringidos a una letra. Quiero que sea posible para que cuando el usuario escriba una letra, la entrada cambie al siguiente campo de entrada y así sucesivamente hasta el último campo de entrada. Si alguien puede guiarme en la dirección correcta, sería muy apreciado.
const InputGrid = ({sentence, key}) =>{ const [userInput, setUserInput] = useState(''); const [word, setWord] = useState(''); const [letters, setLetters] = useState([]); console.log(userInput); useEffect(() =>{ // let word = sentence.split(' '); setWord(sentence); setLetters(word.split('')); }, [sentence, word]); const handleChange = (event) =>{ setUserInput(event.currentTarget.value) } const successInput = { background: 'green' } return( <div> {letters.map(letter =>{ return (<input maxLength="1" type="text" key={key} className="grid" onChange={handleChange} />); })} </div> ) }; export default InputGrid;Puede almacenar las entradas como referencias y luego enfocar la siguiente si un usuario escribe un carácter
import { useRef } from 'react' // ... const inputs = useRef([]); const handleChange = (event, index) =>{ // Check if the current input is not the last if (index +1 != inputs.current.length) { let input = inputs.current[index+1]; // Focus the next input input.focus(); } // Example handle change for your use case // Adding the new character to your current input setUserInput(userInput + event.currentTarget.value); } return( <div> {letters.map((letter, index) =>{ return (<input maxLength="1" type="text" key={key} className="grid" { /* Pass index to onChange event */ } onChange={(event) => handleChange(event, index)} ref={el => inputs.current[index] = el} />); })} </div> ) // ...Eche un vistazo a la documentación de React refs para obtener más explicaciones sobre cómo funcionan las referencias. Respuesta de referencias múltiples: https://stackoverflow.com/a/56063129/9852454