ReactのdivでonKeyDownイベントが動作しない

ReactでdivのkeyDownイベントを使いたい。私はそうしています：

  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>
    )
  }

うまくいくのですが、もっとReactスタイルでやりたいのです。試したのは

        onKeyDown={this.onKeyPressed}

を試してみました。しかし反応しません。確かinput要素では動いた。

[コードペン][1］

どうすればいいのでしょうか？

Rich Warrior
編集された質問 20日 8月 2019 в 4:57
プログラミング
events reactjs keypress keydown
19日 4月 2017 в 6:57
まだビューはありません
質問へのコメント (1)
ソリューション

ReactでdivのonKeyDownイベントをリッスンするには、tabIndex属性を使用する必要があります。tabIndex="0"を設定すると、ハンドラが起動します。

解説 (0)

このように書く必要がある。

<div 
    className="player"
    style={{ position: "absolute" }}
    onKeyDown={this.onKeyPressed}
    tabIndex="0"
  >

onKeyPressedがthisにバインドされていない場合は、arrow関数を使って書き換えるか、コンポーネントのconstructor`でバインドする。

Panther
編集した答え 20日 4月 2017 в 1:28
解説 (5)

あなたは純粋なJavascriptで考えすぎている。Reactのライフサイクルメソッドのリスナーを取り除いて、event.keyCodeの代わりにevent.keyを使いましょう（これはJSのイベントオブジェクトではなく、Reactの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">

        </div>
      </div>
    </div>
  )
}
steel
編集した答え 21日 4月 2017 в 4:12
解説 (6)