Nuevo en Reaccionar.

Estoy tratando de hacer que mi aplicación esté lista para responder a las entradas del teclado (es decir, los botones de flecha) desde el principio mediante la configuración de un eventListener. El problema parece ser que no sé la forma correcta de agregar ese eventListener para que la función llamada pueda acceder al estado del componente.

Aquí está mi función

 handleKeyUp(event) { let retRow = this.state.retRow; let retCol = this.state.retCol; switch(event.key) { case 'ArrowUp': retRow += -1; break; case 'ArrowDown': retRow += 1; break; case 'ArrowLeft': retCol += -1; break; case 'ArrowRight': retCol += 1; break; default: } this.setState({retRow, retCol}); }

Intenté ponerlo en el div más externo de lo que se representa, pero this parece estar indefinido si lo hago.

 render() { /*...*/ return ( <div onKeyUp={this.handleKeyUp}> <h1>{headerText}</h1> {this.renderBoard(this.state.rowCount,this.state.colCount)} <button onClick={() => this.resetGame()}>Restart</button> </div> ); }

Y traté de ponerlo en el documento cuando se monta el componente, pero eso hace que this se refiera al document

 componentDidMount() { document.addEventListener('keyup', this.handleKeyUp); } componentWillUnmount() { document.removeEventListener('keyup', this.handleKeyUp); }

}

De cualquier manera, this es incorrecto para mí para poder acceder al estado del componente con this.state . ¿Cómo puedo hacer que mi componente responda a las entradas del teclado como quiero?