[解決済み] 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要素には効くんですよね。

コードペン

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

どのように解決するのですか？

を使用する必要があります。 タブインデックス 属性で onKeyDown イベントが発生します。設定方法 tabIndex="0" を指定すると、ハンドラが起動します。