Tengo el siguiente código:
const handleInputChange = (evt) => { evt.preventDefault(); setTimeout(() => {console.log(evt)}, 500); }Tengo una barra de búsqueda y cada vez que escribo algo en la función handleInputChange se llama. Al mirar la consola, encuentro que el campo evt.target.value siempre se establece en una cadena vacía, independientemente de las entradas que haya realizado.
Sin embargo, si modifico el código para que sea
const handleInputChange = (evt) => { evt.preventDefault(); const term = evt.target.value; setTimeout(() => {console.log(term)}, 500); }Mi valor objetivo siempre se imprime correctamente. ¿Alguien puede ayudar a aclarar por qué sucede esto?
Cuando pasa el objeto de evento completo, imprime el valor y obtiene el estado actual del objeto porque es una referencia al objeto original, por lo que si borra la entrada o el evento se destruye, sus datos no estarán disponibles.
Cuando guarda el valor de destino del evento actual, no le importa el estado del evento, por lo que es mejor guardar su valor en lugar de propagar la referencia del evento a través de funciones.