onKeyDown event not working on divs in React

Question

I want to use a keyDown event on a div in React. I do:

  componentWillMount() {
      document.addEventListener(\"keydown\", this.onKeyPressed.bind(this));
          


        

Answer 1

You're thinking too much in pure Javascript. Get rid of your listeners on those React lifecycle methods and use event.key instead of event.keyCode (because this is not a JS event object, it is a React SyntheticEvent). Your entire component could be as simple as this (assuming you haven't bound your methods in a constructor).

onKeyPressed(e) {
  console.log(e.key);
}

render() {
  let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
  return (
    

      

        

          
        
      
    
  )
}