0

我正在尝试使用 React Motion 重新创建滑动菜单。你可以在这里看到我的非工作示例：http: //codepen.io/kirupa/pen/BQVzvQ（点击蓝色圆圈显示菜单或隐藏它）

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

回到 React。无论出于何种原因，我附加到 Motion 标签内的菜单元素的事件处理程序都被忽略了。相关片段如下所示：

      <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 中的组件时，事件处理程序甚至没有被附加。出于某种原因，这似乎真的很奇怪。这可能是范围界定问题吗？

谢谢，

基鲁帕

4

1 回答 1

0

这是一个范围界定问题！执行以下操作将其修复：

变种自我=这个；

self.handleMouseDown;

于 2016-12-10T20:48:15.713 回答