Aquí está mi código.
import { useState } from "react"; const App = () => { const [shout, setShout] = useState(true); const [message, setMessage] = useState("hello world!"); window.addEventListener("keypress", e => { console.log(shout); if(e.key === "a" && shout === true) { setMessage(message.toUpperCase()) } }); return ( <div> <h1>{message}</h1> <button onClick={() => setShout(!shout)}>disable keypress!</button> <button onClick={() => setMessage(message.toLowerCase())}>to lower case</button> </div> ) } export default App; Cuando presiono el botón a en mi teclado, el mensaje se transforma en mayúsculas si no se hace clic en el botón de desactivación de keypress de teclas. Si se hace clic en presionar a tecla, el mensaje no debe estar en mayúsculas. Cuando console.log la variable shout en la devolución de llamada de eventListner , parece que la variable shout se establece de verdadero a falso simultáneamente. ¿Cómo puedo prevenirlo?
Debe usar useEffect para agregar efectos secundarios en reaccionar y también para asegurarse de que su oyente se elimine una vez que se desmonte el componente.
También prefiero el document en lugar de window , pero no creo que eso marque la diferencia.
import { useState, useEffect } from "react"; const App = () => { const [shout, setShout] = useState(true); const [message, setMessage] = useState("hello world!"); useEffect(() => { const listener = (e) => { if(e.key === "a" && shout === true) { console.log(e.key, shout); setMessage(message.toUpperCase()); } }; document.addEventListener("keypress", listener); return () => { document.removeEventListener('keypress', listener); }; }, [shout, message]); return ( <div> <h1>{message}</h1> <button onClick={() => setShout(!shout)}>disable keypress!</button> <button onClick={() => setMessage(message.toLowerCase())}>to lower case</button> </div> ) } export default App;