onKeyDownイベントがリアクションのdivで機能しない

Question

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

それはうまく動作しますが、私はリアクションスタイルでもっとやりたいと思います。試しました

 onKeyDown={this.onKeyPressed} 

コンポーネントに。しかし、それは反応しません。これは私が思い出したように入力要素に作用します。

Codepen：http://codepen.io/lafisrap/pen/OmyBYG

私はそれをどのように行うことができますか？

Answer 1

あなたが反応中にdiv要素にイベントをonKeyDownメソッド聞くことができるようにのtabIndex属性を使用する必要があります。 tabIndex = "0"に設定すると、ハンドラが起動されます。

Answer 2

あなたはonKeyPressedがthisにバインドされていない場合は、矢印の機能を使用して、それを書き換えるまたはコンポーネントconstructorでそれをバインドしようとし、それを書くためにこのよう

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

を必要としています。

Answer 3

純粋なJavascriptではあまりにも多くのことを考えています。これらのリアクションライフサイクルメソッドでリスナーを取り除き、event.keyCodeの代わりにevent.keyを使用してください（これは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> 
) 
}