reactjs - press - react input keyup event

El evento onKeyDown no funciona en divs en React

Question

Quiero usar un evento keyDown en un div en React. Hago:

 componentWillMount() {
document.addEventListener("keydown", this.onKeyPressed.bind(this));
}
componentWillUnmount() {
document.removeEventListener("keydown", this.onKeyPressed.bind(this));
}
onKeyPressed(e) {
console.log(e.keyCode);
}
render() {
let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
return (
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed} // not working
>
<div className="light-circle">
<div className="image-wrapper">
<img src={IMG_URL+player.img} />
</div>
</div>
</div>
)
}

Funciona bien, pero me gustaría hacerlo más en estilo React. Lo intenté

 onKeyDown={this.onKeyPressed}

en el componente Pero no reacciona. Funciona en elementos de entrada como recuerdo.

Codepen: http://codepen.io/lafisrap/pen/OmyBYG

¿Cómo puedo hacerlo?

Answer 1

Debe usar el atributo tabIndex para poder escuchar el evento onKeyDown en un div en React. Establecer tabIndex = "0" debería activar su controlador.

Answer 2

Estás pensando demasiado en Javascript puro. Deshágase de sus oyentes en esos métodos de ciclo de vida React y use event.key lugar de event.keyCode (porque este no es un objeto de evento JS, es un React SyntheticEvent ). Todo su componente podría ser tan simple como esto (suponiendo que no haya vinculado sus métodos en un constructor).

onKeyPressed(e) {
console.log(e.key);
}
render() {
let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
return (
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={(e) => this.onKeyPressed(e)}
>
<div className="light-circle">
<div className="image-wrapper">
<img src={IMG_URL+player.img} />
</div>
</div>
</div>
)
}

Answer 3

Necesitas escribirlo de esta manera

<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed}
tabIndex="0"
>

Si onKeyPressed no está vinculado a this , intente reescribirlo utilizando la función de flecha o vincularlo en el constructor componentes.