Event Handler Inside React-Motion's Motion Tag Is Getting Ignored

Question

I'm trying to re-create a sliding menu using React Motion. You can see my non-working example here: http://codepen.io/kirupa/pen/BQVzvQ (click on the blue circle to display the menu or to hide it)

Here is my problem. The menu should disappear when you click anywhere inside of the yellow region. A working non-ReactMotion example is here: https://www.kirupa.com/html5/examples/slidingmenu.htm

Getting back to React. For whatever reason, my event handler attached to the menu element inside the Motion tag is getting ignored. The relevant snippet looks as follows:

      <Motion style={
        {
          x: spring(this.state.visible ? 0 : -100)
        }
      }>
        {
          function({x}) {
            return (
                <div onMouseDown={this.handleMouseDown} id="flyoutMenu" style={{
                  transform: "translate3d(" + x + "vw, " + 15 + "vw, 0)"
                }}>
                  <h2><a href="#">Home</a></h2>
                  <h2><a href="#">About</a></h2>
                  <h2><a href="#">Contact</a></h2>
                  <h2><a href="#">Search</a></h2>
                </div>
            );
          }
        }
      </Motion>

Notice the onMouseDown={this.handleMouseDown}. This is the same event attached to the blue circle that displays (and hides) the menu when you click, and that works fine.

What am I doing wrong here? This seems like I'm doing something obviously wrong, but I can't quite figure out what it is. In case this helps, when I inspect the component in the React DevTools, the event handler isn't even getting attached. That seems really bizarre for some reason. Could it be a scoping issue?

Thanks,

Kirupa

Answer 1

It was a scoping issue! Doing something like the following fixed it:

var self = this;

self.handleMouseDown;