反应 onMouseOver 不触发

Question

我想在鼠标移到 div 上时触发一个事件。
我正在使用 React 作为我的前端框架，并遵循他们的 docs，事件不会触发。

<div onMouseOver={console.log('onMouseOver')} onMouseOut={console.log('onMouseOut')} className="hidden-xs text-center">
      {productImage}
      {productContent}
</div>

加载页面时，我在控制台中看到 onMouseOver 和 onMouseOut 的日志输出，但是当我将鼠标移到该元素上时 (div)，没有任何其他内容被写入。

Answer 1

您应该分配方法的引用而不是在事件寄存器中调用它们。试试这个：

handleOnMouseOver: function(e){
  console.log("onMouseOver");
}
....
<div onMouseOver={this.handleOnMouseOver} ..../> // NOTE : don't put () at the end

Answer 2

为了扩展 Phil 的回答——无论您放在大括号 {} 中的什么，都会在安装组件时进行评估。如果你把

onMouseOver={console.log("onMouseOver")}

然后在挂载组件时，React 通过执行 console.log() which returns undefined 来评估表达式，因此处理程序设置为 undefined.

如果你把

onMouseOver={this.handleOnMouseOver}

表达式的计算结果是对处理程序的引用，所以你得到了你想要的。您也可以使用

onMouseOver={() => console.log("mouseOver")}

反应 onMouseOver 不触发

React onMouseOver doesn't fire

javascript

reactjs

onmouseover