Tengo este código en el componente HomePage y cuando presiono la tecla de flecha hacia abajo/arriba, no sucede nada. Y acabo de darme cuenta de que el controlador de eventos funciona correctamente al presionar las teclas de flecha con ctrl. Busqué por todas partes, pero no encontré nada. ¿Alguien puede ayudar, por favor? Mi navegador es Chrome v.96.+ React versión 17.0.2, nodo v.16.13.1
const HomePage = () => { const keyPressHandler = (e) => { if (e.repeat) return; if (e.key === "ArrowDown") { window.scrollBy(0, window.innerHeight); } if (e.key === "ArrowUp") { window.scrollBy(0, -window.innerHeight); } }; return ( <Container tabIndex="0" onKeyDown={keyPressHandler}> <div style={{ width: "100%", height: "100vh", backgroundColor: "green" }} /> <div style={{ width: "100%", height: "100vh", backgroundColor: "gray" }} /> <div style={{ width: "100%", height: "100vh", backgroundColor: "red" }} /> </Container> ); };
Lo arreglé creando un nuevo proyecto y pegando este código allí. Tuve algunos problemas al instalar las dependencias de los iconos de reacción y lo detuve manualmente. creo que me sale un error ahi