在不监听它们的组件上触发的 React 鼠标事件

Question

不确定是我对 React 事件的深刻误解还是实际的错误，但是在父项上注册的鼠标事件有时会在子项上触发。

在下面的容器中，将鼠标悬停在两个 div 周围最终会导致内部 div 突出显示为红色，即使它没有用于附加 [=] 的事件触发器20=]-悬停 class（尽管它的父级有）。

Answer 1

这似乎取决于鼠标移动的速度。我的猜测是，当事件被触发时，event.target 变成鼠标下方的任何内容。所以它在进入父级 div 时触发，但如果鼠标快速移动，那么在处理事件处理程序时它可能已经悬停在子级 div 上。

（更新答案）

正如@Stan 评论的那样，将 event.target 替换为 event.currentTarget 是最简单的修复方法，它将针对其侦听器触发事件的元素而不是鼠标下的元素。

（原答案/其他选项）

您还可以在父 div 上设置 ref="target"，然后使用引用而不是事件目标。

_mouseEnter: function(event) {
  this.refs.target.getDOMNode().classList.add('ui-hover');
},

但是，最好避免像这样触摸 DOM。在那种情况下，您可以在事件处理程序中使用 setState 并使用条件语句根据 this.state 给出不同的结果。

_mouseEnter: function(event) {
  this.setState({
    hovering: true
  });
}

React mouse events fired on components not listening for them