Я хочу использовать событие keydown на div в реакцию. Я делаю:
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}
на компоненте. Но это вовсе'т реагировать. Он работает на входных элементов насколько я помню.
Как я могу сделать это?
Вы должны использовать tabindex в атрибут уметь слушать событие OnKeyDown на div в реакцию. Параметр tabindex В=С"0" и должен срабатывать обработчик.
Вам нужно написать его таким образом
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed}
tabIndex="0"
>
Если onKeyPressedне обязан
это`, то попробуйте переписать его, используя стрелки функции или привязать его в компонент "конструктор".
Вы'вэ слишком много думал на чистом JavaScript. Избавиться от ваших слушателей реагировать на эти методы жизненного цикла и использовать событие.ключ
вместо событие.ключ
(потому что это не в JS событие объекта, это реагировать SyntheticEvent). Весь ваш компонент может быть как простой, как это (если вы не'т связали методов в конструкторе).
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>
)
}