Quiero escuchar el evento keydown en un componente de enrutador de reacción local y ejecutará una función si se presionó una determinada tecla. Pero debido a que el detector de eventos se agrega al objeto del documento, si estoy en una página diferente, aún intentará ejecutar la función, lo que generará un error ya que la función es local para mi componente.
Por ejemplo, si estoy en la página de inicio de sesión (domain.com/login), el componente de la página de inicio de sesión se carga en <main> y <header> permanece constante. Entonces, quiero ejecutar una función que está en mi componente de inicio de sesión, cuando la persona presiona Enter, presionará el botón de inicio de sesión / también conocido como ejecutar la función de inicio de sesión que se llama cuando se presiona el botón.
La palabra clave de retorno se ejecutará cuando el componente se desmonte
useEffect(() => { function onKeyDown(e) { if (e.key === "Enter") { console.log("ENTER PRESSED") submit() } } document.addEventListener("keydown", onKeyDown) return () => document.removeEventListener('keydown', onKeyDown); }, [])