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 al estilo React. Lo intenté
onKeyDown={this.onKeyPressed}en el componente. Pero no reacciona. Funciona en elementos de entrada según recuerdo.
¿Cómo puedo hacerlo?
Debe usar el atributo tabIndex para poder escuchar el evento onKeyDown en un div en React. Establecer tabIndex="0" debería activar su controlador.
Tienes que escribirlo de esta manera.
<div className="player" style={{ position: "absolute" }} onKeyDown={this.onKeyPressed} tabIndex="0" > Si onKeyPressed no está vinculado a this , intente reescribirlo usando la función de flecha o vincúlelo en el constructor del componente.
Estás pensando demasiado en Javascript puro. Deshágase de sus oyentes en esos métodos de ciclo de vida de React y use event.key en 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={this.onKeyPressed} > <div className="light-circle"> <div className="image-wrapper"> <img src={IMG_URL+player.img} /> </div> </div> </div> ) }