React- Motion的Motion标记中的事件处理程序被忽略

Question

我正在尝试使用React Motion重新创建一个滑动菜单。您可以在这里看到我的不起作用的示例：http://codepen.io/kirupa/pen/BQVzvQ (单击蓝色圆圈以显示菜单或隐藏菜单)

这就是我的问题。当您在黄色区域内的任意位置单击时，菜单应该会消失。下面是一个有效的非ReactMotion示例：https://www.kirupa.com/html5/examples/slidingmenu.htm

重新开始反应。无论出于什么原因，我附加到Motion标记内的menu元素的事件处理程序都被忽略了。相关代码片段如下所示：

      <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>

请注意onMouseDown={this.handleMouseDown}。这与附加到蓝色圆圈的事件相同，该事件在您单击时显示(和隐藏)菜单，并且运行良好。

我在这里做错了什么？这看起来像是我在做一些明显错误的事情，但我不能完全弄清楚是什么。如果这有帮助，当我在React DevTools中检查组件时，事件处理程序甚至没有被附加。出于某种原因，这看起来真的很奇怪。这可能是作用域问题吗？

谢谢,

基鲁帕

Answer 1

这是一个作用域问题！执行如下操作来修复它：

var self = this；

self.handleMouseDown；