Estoy construyendo un sitio web usando Next.js, y actualmente estoy tratando de ejecutar una función simple al presionar una tecla. El problema que tengo es que el evento onKeyDown no se activa como esperaba. Mi código es el siguiente: <main onKeyDown={e => console.log("Key pressed")}>
Actualmente se coloca en el elemento "principal", que es el elemento raíz superior de este componente. Intenté colocar el evento onKeyDown en muchos de los otros elementos también, sin suerte. No estoy seguro si es la ubicación lo que causa problemas o mi falta de comprensión de cómo usar este evento. Cualquier ayuda sería apreciada.
Por ahora, simplemente quiero que escriba algo en la consola para poder ver que se activa. Intenté usar onKeyPress en su lugar, así como asignar una función al evento en lugar de una expresión lambda, lo que no debería marcar la diferencia.
En su componente, use useEffect para agregar (y eliminar) el detector de eventos al documento.
const Component = () => { useEffect(() => { const keyDownHandler = (e) => console.log(`You pressed ${e.code}.`); document.addEventListener("keydown", keyDownHandler); // clean up return () => { document.removeEventListener("keydown", keyDownHandler); }; }, []); return <main>Press a key</main>; };Incluso puede crear un gancho personalizado (cuidado con la lista de dependencias):
const useKeyDown = (handler, deps = []) => { useEffect(() => { document.addEventListener("keydown", handler); // clean up return () => { document.removeEventListener("keydown", handler); }; }, deps); }; const Component = () => { useKeyDown((e) => console.log(`You pressed ${e.code}.`), []); return <main>Press a key</main>; };