反应停止本机绑定的传播

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

从我收集的信息来看，合成事件无法覆盖原生事件，因为 react 绑定在文档级别，并且气泡总是最后触发的事件。

选项 2 使用 ReactDOM(Yuck) 获取节点

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

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

选项 3 在根组件创建点击处理程序

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

在我看来，使用 React 很难实现如此简单直接的任务。我并没有过度使用它，所以请其他人在这里指出我正确的方向吗？

Answer 1

解决方案

所以我见过的解决这个问题的最佳解决方案是找到被点击元素的目标，然后递归调用目标父级并检查它是否与您有兴趣捕获的元素匹配。

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

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

这是我找到的解决问题的源代码。

Answer 2

尝试 preventDefault() 方法

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