0

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.

1 respuesta 1

0

Una opción es controlar el contador mediante el hook useEffect, con el cual cada vez que se modifique el valor de un state, entrará a la implementación de dicho hook.

Por ejemplo

useEffect(() => {
  if (key) {
    const match = key === CORRECT_VALUE

    if (match)
      setCorrectChars(corrects + 1)
  }
}, [key])

Donde key es el valor introducido en el input.

Resumiendo, cada vez que se ingrese algo en el input con referencia al state key, este desencadenará la implementación dentro de useEffect, que será aumentar el valor del state correctsChar cuando éste sea, efectivamente, correcto.

Acá te dejo un ejemplo para que lo analices.

Cualquier duda nos comentas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.