Tengo un contador de aciertos que debería de actualizarse cada vez que introduzco un valor correcto en un input. Para lo que he creado el siguiente hook:
const [correctChars, setCorrectChars] = useState(0);
Los inputs de mi formulario tienen en evento onkeyup que llama a la siguiente función:
const autoTab = e => {
let tabindex = (e.target).getAttribute('data-index') || 0;
let correctWord = (e.target).getAttribute('data-char');
tabindex = Number(tabindex);
let backspace_key = 8;
if(e.target.value){
if(e.target.value === correctWord){
e.target.classList.add('correct');
setCorrectChars(correctChars + 1);
}
document.getElementById('input-' + (tabindex + 1)).focus();
}
if (e.keyCode === backspace_key) {
if(e.target.value != correctWord){
e.target.classList.remove('correct');
}
document.getElementById('input-' + (tabindex - 1)).focus();
}
};
La utilizo para controlar el auto tabulador cuando el input tiene valor y pasar el foco al siguiente input y quiero aprovechar para actualizar el estado de correctChars. El cambio del foco y agregar la clase para cambiar el color del input en caso de ser correcto funciona perfectamente. Pero el setear el "acierto" sólo lo consigo en el primer input, es decir, consigo que correctChars que inicializo su estado a 0, pasa a uno al acertar la primera vez, pero no ninguna otra vez en que el valor del input es correcto. Tampoco recibo ningún fallo por consola. Sé que será algo muy sencillo pero estoy atascado. He probado de otras formas pero siempre con el mismo resultado. Gracias de antemano.