Estoy creando una aplicación donde necesito registrar las teclas que presiona el usuario. Para hacer eso, estoy usando eventos keydown y keyup. Sin embargo, no quiero registrar la misma clave varias veces cuando el usuario la mantiene presionada.
Quiero que la función downHandler no se ejecute varias veces cada vez que mantenga presionada una tecla. Solo quiero que se ejecute una vez. Intento usar una declaración if para eso y establecer keyPressed en verdadero para que no se vuelva a ejecutar. Intento registrar keyPressed justo después de configurarlo como verdadero, pero se registra como falso y la función aún se ejecuta nuevamente.
Traté de eliminar setKeyPressed(false) en la función downHandler, pero keyPressed seguía siendo falso sin importar qué.
Aquí está mi aplicación.js:
import { useState, useEffect } from "react"; function App() { const key = useKeyPress(); function useKeyPress(targetKey) { const [keyPressed, setKeyPressed] = useState(false); function downHandler(key) { if (keyPressed === false) { setKeyPressed(true); console.log(keyPressed) } } const upHandler = (key) => { console.log("up") setKeyPressed(false); }; useEffect(() => { window.addEventListener("keydown", downHandler); window.addEventListener("keyup", upHandler); return () => { window.removeEventListener("keydown", downHandler); window.removeEventListener("keyup", upHandler); }; }, []); return keyPressed; } return ( <div> </div> ) } export default App;El enlace personalizado debe crearse en el ámbito externo, cuando lo escribe en la función de representación (cuerpo del componente de función) está recreando el enlace en cada representación. Por lo tanto, pierdes estado cada vez.
Sorprendido de que no haya recibido ninguna advertencia de pelusa de romper las reglas del gancho: escribir un gancho dentro de una función, asegúrese de que esté configurado.
Además, está haciendo una comparación con el estado obsoleto keyPressed === false duo to closures, puede arreglarlo usando una referencia.
function useKeyPress(targetKey) { const [keyPressed, setKeyPressed] = useState(false); const keyPressedRef = useRef(); useEffect(() => { keyPressedRef.current = keyPressed; console.log("keyPressed", keyPressed); }, [keyPressed]); useEffect(() => { function downHandler(key) { if (keyPressedRef.current === false) { setKeyPressed(true); } } const upHandler = (key) => { setKeyPressed(false); }; window.addEventListener("keydown", downHandler); window.addEventListener("keyup", upHandler); return () => { window.removeEventListener("keydown", downHandler); window.removeEventListener("keyup", upHandler); }; }, []); return keyPressed; } export default function App() { const key = useKeyPress(); return <div></div>; }https://codesandbox.io/s/inspiring-jasper-3lym7p?file=/src/App.js:77-897