Saya ingin menggunakan keyDown event pada div dalam Bereaksi. Yang saya lakukan:
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>
)
}
Itu bekerja dengan baik, tapi saya ingin melakukannya lebih dalam Bereaksi gaya. Aku mencoba
onKeyDown={this.onKeyPressed}
pada komponen. Tapi itu doesn't bereaksi. Ia bekerja pada elemen input seperti yang saya ingat.
Bagaimana saya bisa melakukannya?
Anda perlu untuk menulis dengan cara ini
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed}
tabIndex="0"
>
Jika onKeyPressed
tidak terikat ini
, maka cobalah untuk menulis ulang dengan menggunakan panah fungsi atau mengikat dalam komponen pembina
.
Anda're berpikir terlalu banyak di murni Javascript. Menyingkirkan pendengar anda pada orang-orang Bereaksi siklus hidup metode dan menggunakan acara.key
bukan acara.keyCode
(karena ini bukan JS objek acara, itu adalah Bereaksi SyntheticEvent). Seluruh komponen dapat yang sederhana seperti ini (dengan asumsi anda belum't terikat metode anda dalam 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>
)
}