Actualmente tengo un componente de reacción y estoy tratando de tener un detector de eventos de Windows que se active en cada pulsación de tecla y reaccionará si es la tecla de tabulación, pero actualmente está presionando varias veces cada vez.
¿Hay alguna forma de hacerlo de modo que cada pulsación de tecla se active una sola vez? Aquí está el código
render() { window.addEventListener('keydown',(event) => { // here the eventListener should only trigger once per keypress, but it's hitting 4 times console.log("event",event); }) }addEventListener no pertenece a la función render() . Allí creará un nuevo detector de eventos en cada renderizado de ese componente.
En su lugar, colóquelo en el enlace del ciclo de vida componentDidMount .
class Component extends React.Component{ handleKeyDown =(event) =>{ // here the eventListener should only trigger once per keypress, but it's hitting 4 times console.log("event",event); } componentDidMount(){ window.addEventListener('keydown',this.handleKeyDown) } componentWillUnmount(){ window.removeEventListener('keydown',this.handleKeyDown) } render() { return <button onClick={()=>this.setState((state)=>({test:state?.test+1}))}>test</button> } } Tenga en cuenta que configurar un detector de eventos en la window creará un detector de eventos global. Debe eliminarlo cuando ya no lo necesite, por ejemplo, en componentWillUnmount