He encontrado un puñado de preguntas que se refieren a cosas similares, pero ninguna que satisfaga todos los criterios que debo cumplir. Estoy tratando de adjuntar un detector de eventos al documento dentro de useEffect, luego lo elimino con la función de devolución de llamada useEffect. El problema radica en el hecho de que mi función de escucha requiere un parámetro de evento para verificar qué tecla se presionó.
import { useEffect } from 'react'; function Board() { useEffect(() => { document.addEventListener('keyup', commit); return () => { document.removeEventListener('keyup', commit); } } const commit = (event) => { if(event.target.keyCode === '13') { console.log('Enter key pressed'); } } return ( <div className="Board"> This is my component </div> ) }Esto nunca consolará. registrará nada porque no se pasa ninguna variable de evento al oyente.
Puede acceder directamente a la clave desde el objeto de evento en eventHandler (commit fn) y pasar una matriz de dependencia vacía a useEffect
import { useEffect } from 'react'; function Board() { useEffect(() => { document.addEventListener('keyup', commit); return () => { document.removeEventListener('keyup', commit); } },[]) const commit = (event) => { if(event.key === 'a') { console.log('Enter key pressed',event.key); } } return ( <div className="Board"> This is my component </div> ) }