ReactJS - Add custom event listener to component

Question

In plain old javascript I have the DIV   lt div class  movie  id  my movie  gt    and the following javascript code   var myMovie   document getElementById  my movie    myMovie addEventListener  nv-enter   function  event         console log  change scope          Now I have a React Component  inside this component  in the render method  I am returning my div  How can I add an event listener for my custom event   I am using this library for TV apps - navigation    import React    Component   from  react    class MovieItem extends Component      render          if this props index     0          return            lt div aria-nv-el aria-nv-el-current className  menu item nv-default  gt               lt div className  indicator selected  gt  lt  div gt               lt div className  category  gt                   lt span className  title  gt  this props movieItem caption toUpperCase    lt  span gt               lt  div gt           lt  div gt                     else         return            lt div aria-nv-el className  menu item nv-default  gt               lt div className  indicator selected  gt  lt  div gt               lt div className  category  gt                   lt span className  title  gt  this props movieItem caption toUpperCase    lt  span gt               lt  div gt           lt  div gt                         export default MovieItem    Update  1     I applied all the ideas provided in the answers  I set the navigation library to debug mode and I am able to navigate on my menu items only based on the keyboard  as you can see in the screenshot I was able to navigate to Movies 4  but when I focus an item in the menu or press enter  I dont see anything in the console   import React    Component   from  react   import ReactDOM from  react-dom    class MenuItem extends Component      constructor props        super props          Pre-bind your event handler  or define it as a fat arrow in ES7 TS     this handleNVFocus   this handleNVFocus bind this       this handleNVEnter   this handleNVEnter bind this       this handleNVRight   this handleNVRight bind this          handleNVFocus   event   gt          console log  Focused      this props menuItem caption toUpperCase            handleNVEnter   event   gt          console log  Enter      this props menuItem caption toUpperCase            handleNVRight   event   gt          console log  Right      this props menuItem caption toUpperCase            componentDidMount         ReactDOM findDOMNode this  addEventListener  nv-focus   this handleNVFocus       ReactDOM findDOMNode this  addEventListener  nv-enter   this handleNVEnter       ReactDOM findDOMNode this  addEventListener  nv-right   this handleNVEnter         this refs nv addEventListener  nv-focus   this handleNVFocus         this refs nv addEventListener  nv-enter   this handleNVEnter         this refs nv addEventListener  nv-right   this handleNVEnter          componentWillUnmount         ReactDOM findDOMNode this  removeEventListener  nv-focus   this handleNVFocus       ReactDOM findDOMNode this  removeEventListener  nv-enter   this handleNVEnter       ReactDOM findDOMNode this  removeEventListener  nv-right   this handleNVRight         this refs nv removeEventListener  nv-focus   this handleNVFocus         this refs nv removeEventListener  nv-enter   this handleNVEnter         this refs nv removeEventListener  nv-right   this handleNVEnter          render         var attrs   this props index     0     aria-nv-el-current   true            return          lt div ref  nv  aria-nv-el     attrs  className  menu item nv-default  gt             lt div className  indicator selected  gt  lt  div gt             lt div className  category  gt                 lt span className  title  gt  this props menuItem caption toUpperCase    lt  span gt             lt  div gt         lt  div gt                export default MenuItem    I left some lines commented because in both cases I am not able to get the console lines to be logged   Update  2  This navigation library does not work well with React with its original Html Tags  so I had to set the options and rename the tags to use aria-  so it would not impact React   navigation setOption  prefix   aria-nv-el    navigation setOption  attrScope   aria-nv-scope    navigation setOption  attrScopeFOV   aria-nv-scope-fov    navigation setOption  attrScopeCurrent   aria-nv-scope-current    navigation setOption  attrElement   aria-nv-el    navigation setOption  attrElementFOV   aria-nv-el-fov    navigation setOption  attrElementCurrent   aria-nv-el-current

User · Answer

You could use componentDidMount and componentWillUnmount methods   import React    Component   from  react   import ReactDOM from  react-dom    class MovieItem extends Component        handleNVEvent   event   gt                            componentDidMount             ReactDOM findDOMNode this  addEventListener  nv-event   this  handleNVEvent              componentWillUnmount             ReactDOM findDOMNode this  removeEventListener  nv-event   this  handleNVEvent                        export default MovieItem

User · Answer

I recommend using React createRef   and ref this elementRef to get the DOM element reference instead of ReactDOM findDOMNode this   This way you can get the reference to the DOM element as an instance variable  import React    Component   from  react   import ReactDOM from  react-dom    class MenuItem extends Component      constructor props        super props        this elementRef   React createRef           handleNVFocus   event   gt          console log  Focused      this props menuItem caption toUpperCase                componentDidMount         this elementRef addEventListener  nv-focus   this handleNVFocus          componentWillUnmount         this elementRef removeEventListener  nv-focus   this handleNVFocus          render         return          lt element ref  this elementRef    gt                export default MenuItem

User · Answer

If you need to handle DOM events not already provided by React you have to add DOM listeners after the component is mounted  Update  Between React 13  14  and 15 changes were made to the API that affect my answer  Below is the latest way using React 15 and ES7  See answer history for older versions  class MovieItem extends React Component      componentDidMount            When the component is mounted  add your DOM listener to the  quot nv quot  elem          The  quot nv quot  elem is assigned in the render function       this nv addEventListener  quot nv-enter quot   this handleNvEnter          componentWillUnmount            Make sure to remove the DOM listener when the component is unmounted      this nv removeEventListener  quot nv-enter quot   this handleNvEnter             Use a class arrow function  ES7  for the handler  In ES6 you could bind        a handler in the constructor    handleNvEnter    event    gt        console log  quot Nv Enter  quot   event          render            Here we render a single  lt div gt  and toggle the  quot aria-nv-el-current quot  attribute        using the attribute spread operator  This way only a single  lt div gt         is ever mounted and we don t have to worry about adding removing        a DOM listener every time the current index changes  The attrs         are  quot spread quot  onto the  lt div gt  in the render function      attrs      const attrs   this props index     0     quot aria-nv-el-current quot   true                Finally  render the div using a  quot ref quot  callback which assigns the mounted         elem to a class property  quot nv quot  used to add the DOM listener to      return          lt div ref  elem   gt  this nv   elem  aria-nv-el     attrs  className  quot menu item nv-default quot  gt                     lt  div gt                 Example on Codepen io

User · Answer

First off  custom events don t play well with React components natively  So you cant just say  lt div onMyCustomEvent  something  gt  in the render function  and have to think around the problem   Secondly  after taking a peek at the documentation for the library you re using  the event is actually fired on document body  so even if it did work  your event handler would never trigger   Instead  inside componentDidMount somewhere in your application  you can listen to nv-enter by adding  document body addEventListener  nv-enter   function  event           logic       Then  inside the callback function  hit a function that changes the state of the component  or whatever you want to do

[reactjs] ReactJS - Add custom event listener to component

Examples related to reactjs