Quiero usar un evento keyDown en un div en React. Lo 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 al estilo React. He probado
onKeyDown={this.onKeyPressed}
en el componente. Pero no reacciona. Funciona en los elementos de entrada si no recuerdo mal.
¿Cómo puedo hacerlo?
Tienes que escribirlo así
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed}
tabIndex="0"
>
Si onKeyPressed
no está ligado a this
, entonces intenta reescribirlo usando la función arrow o ligarlo en el componente constructor
.
Estás pensando demasiado en Javascript puro. Deshazte de tus listeners en esos métodos del ciclo de vida de React y usa event.key
en lugar de event.keyCode
(porque esto no es un objeto de evento JS, es un React SyntheticEvent). Todo tu componente podría ser tan simple como esto (asumiendo que no has enlazado tus 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>
)
}