在本机绑定

Question

我忙于与React及其合成事件系统搏斗，并且无法使用合成的e.stopPropagation（）方法阻止本机事件。

情况是我有一些下拉菜单，点击它们时切换，工作正常，没有任何问题。我遇到的问题是，我希望扩展此功能，以便当我点击屏幕上的任何其他位置时，应禁用任何活动下拉列表。

当然，我们需要某种全局事件处理程序来处理这个问题。我试图在组件生命周期中简单地创建全局事件绑定，并防止对子项的任何点击冒泡它看起来像这样：

在点击

期间阻止传播的尝试失败

class parent extends component {
  ...

  componentWillMount () {
    document.addEventListener('click', this.someAction)
  }

  render () {
    return ...
  }
}

class child extends component {
  ...

  _handleClick (e) {
    e.stopPropagation() // Doesn't work

    // Do something
  }
}

从我收集的内容来看，合成事件无法覆盖原生事件，因为在文档级别绑定了反应，并且泡沫总是最后触发的事件。

选项2使用ReactDOM（Yuck）获取节点

我找到的第二个选项是使用ReactDOM来获取节点并检查点击的目标，如果它与组件匹配，那么我们就不会在任何活动状态上触发重置。

必须导入ReactDOM以获取节点似乎非常麻烦和过度，我觉得那里有一个更清洁的解决方案。

选项3在根组件

处创建单击处理程序

我们可以在处理全局点击的根组件上创建一个处理程序，但现在我们已经失去了封装，因为我们已经移动逻辑来处理与这个小组件相关的点击一直到最顶层再次，我不喜欢这个解决方案。

对我来说，似乎不可能这样一个简单而直接的任务很难用反应来实现。我没有过度使用它，所以请其他人指点我在这里正确的轨道吗？

Answer 1

尝试使用preventDefault（）方法

onReset(e) {
  e.preventDefault()
  ...
}

Answer 2

解决方案

因此，我已经看到解决此问题的最佳解决方案是找到被点击元素的目标，然后递归调用目标父对象并检查它是否与您有兴趣捕获的元素匹配。

如果父节点最终到达文档而没有匹配您的元素，那么您可以安全地断定点击是从元素外部启动的。

https://github.com/Pomax/react-onclickoutside

这是我发现解决问题的源代码。