Quiero ejecutar una función cuando se presiona el botón de flecha hacia abajo y volver a ejecutar una función si no se presiona el botón de flecha hacia abajo.
const Gamefile = () => { useEffect(() => { window.addEventListener('keydown', e => { if(e.key === 'ArrowDown'){ duck(); } } ) window.addEventListener('keyup'), e => { if(e.key === 'ArrowDown'){ notduck(); } } }) }probé este código pero es un error, "Esperaba una asignación o llamada de función y en su lugar vi una expresión sin expresiones no utilizadas"
El segundo addEventListener es incorrecto. Está pasando solo un argumento, la función de escucha no se pasa.
const Gamefile = () => { useEffect(() => { window.addEventListener('keydown', e => { if (e.key === 'ArrowDown') { duck(); } }); window.addEventListener('keyup', e => { if (e.key === 'ArrowDown') { notduck(); } }); }); };Además, le recomendaría que agregue una función de limpieza para este enlace para eliminar los oyentes cuando no sean necesarios.
Error simple, accidentalmente cerró su paréntesis demasiado pronto, por lo que no estaba pasando la función.
const Gamefile = () => { useEffect(() => { window.addEventListener('keydown', e => { if (e.key === 'ArrowDown') { duck(); } }) window.addEventListener('keyup', e => { if (e.key === 'ArrowDown') { notduck(); } }) }) }Personalmente, también recomendaría cambiar el seguimiento de teclas a un gancho. Escribí un gancho rápido que maneja esto y también limpia los eventos.
const useButtons = () => { const [pushed, setPushed] = useState([]); useEffect(() => { const handlePress = (event) => { setPushed((previous) => { return [...new Set([...previous, event.keyCode])]; }); }; const handleUnpress = (event) => { setPushed((previous) => { return previous.filter((key) => event.keyCode !== key); }); }; window.addEventListener("keydown", handlePress); window.addEventListener("keyup", handleUnpress); return () => { window.removeEventListener("keydown", handlePress); window.removeEventListener("keyup", handleUnpress); }; }); return { pushed }; };Esto realmente limpia el uso, que se ve de la siguiente manera.
const App = () => { const { pushed } = useButtons(); return ( <> <h1>Pushed Buttons</h1> <code>{pushed.toString()}</code> </> ); }; ReactDOM.render(<App />, document.getElementById("container"));