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           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          lt div          className  player          style    position   absolute             onKeyDown  this onKeyPressed     not working        gt           lt div className  light-circle  gt             lt div className  image-wrapper  gt               lt img src  IMG URL player img    gt             lt  div gt           lt  div gt         lt  div gt              It works fine  but I would like to do it more in React style  I tried           onKeyDown  this onKeyPressed    on the component  But it doesn t react  It works on input elements as I recall   Codepen  How can I do it

User · Answer

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        lt div        className  quot player quot        style    position   quot absolute quot           onKeyDown  this onKeyPressed       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

User · Answer

Using the div trick with tab index  quot 0 quot  or tabIndex  quot -1 quot  works  but any time the user is focusing a view that s not an element  you get an ugly focus-outline on the entire website  This can be fixed by setting the CSS for the div to use outline  none in the focus  Here s the implementation with styled components  import styled from  quot styled-components quot   const KeyReceiver   styled div     amp  focus       outline  none         and in the App class    render         return                lt KeyReceiver onKeyDown  this handleKeyPress  tabIndex  -1  gt            Display stuff           lt  KeyReceiver gt

User · Answer

You need to write it this way   lt div      className  player      style    position   absolute         onKeyDown  this onKeyPressed      tabIndex  0     gt    If onKeyPressed is not bound to this  then try to rewrite it using arrow function or bind it in the component constructor

User · Answer

The answer with   lt div      className  player      onKeyDown  this onKeyPressed      tabIndex  0   gt    works for me  please note that the tabIndex requires a number  not a string  so tabIndex  0  doesn t work

User · Answer

You should use tabIndex attribute to be able to listen onKeyDown event on a div in React  Setting tabIndex  quot 0 quot  should fire your handler

User · Answer

You re missing the binding of the method in the constructor  This is how React suggests that you do it   class Whatever     constructor         super        this onKeyPressed   this onKeyPressed bind this          onKeyPressed e           your code            render         return   lt div onKeyDown  this onKeyPressed    gt            There are other ways of doing this  but this will be the most efficient at runtime

[reactjs] onKeyDown event not working on divs in React

Examples related to reactjs

Examples related to events

Examples related to keypress

Examples related to keydown