을 사용하고 싶 keyDown 이벤트에 사업부에서는 반응합니다. I do:
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>
)
}
그것은 작동하지만,나는 그것을 할 수상에 반응하는 스타일입니다. 나
onKeyDown={this.onKeyPressed}
에서 구성 요소입니다. 하지만 그't react. 에서 작동하는 입력한 요소로 기억이 나요.
어떻게 할 수 있습니다?
You'다시 생각에 너무 많은 순수한 자바 스크립트. 의 제거 당신의 청취자들에 반응할 수명 주기 방법과 사용이벤트입니다.키
대신이벤트입니다.keyCode
(기 때문에 이것은 JS 이벤트 객체가,그것은 반응SyntheticEvent). 의 전체 구성요소 간단할 수 있는 이(가정하지 않았't 밖에 없는 당신의 방법에서 생성자).
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>
)
}