title: onKeyDown event not working on divs in React
body: <p>I want to use a keyDown event on a div in React. I do:</p>
  <pre><code>  componentWillMount() {
        document.addEventListener(&quot;keydown&quot;, this.onKeyPressed.bind(this));
    }
  
    componentWillUnmount() {
        document.removeEventListener(&quot;keydown&quot;, this.onKeyPressed.bind(this));
    }      
    
    onKeyPressed(e) {
      console.log(e.keyCode);
    }
      
    render() {
      let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
      return (
        &lt;div 
          className=&quot;player&quot;
          style={{ position: &quot;absolute&quot; }}
          onKeyDown={this.onKeyPressed} // not working
        &gt;
          &lt;div className=&quot;light-circle&quot;&gt;
            &lt;div className=&quot;image-wrapper&quot;&gt;
              &lt;img src={IMG_URL+player.img} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  </code></pre>
  <p>It works fine, but I would like to do it more in React style. I tried</p>
  <pre><code>onKeyDown={this.onKeyPressed}
  </code></pre>
  <p>on the component. But it doesn't react. It works on input elements as I recall.</p>
  <p><a href="http://codepen.io/lafisrap/pen/OmyBYG" rel="noreferrer">Codepen</a></p>
  <p>How can I do it?</p>