Javascript 对Mouseover不'作出反应；t火

我想在鼠标移动到

div

上时触发一个事件
我使用

React

作为我的前端框架，按照他们的方法，事件不会触发

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

{productImage}
{productContent}

---

加载页面时，我在控制台中看到了来自onMouseOver和onMouseOut的全部日志输出，但当我将鼠标移到元素（

div

）上时，其他内容都不会写入。

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

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

handleOnMouseOver:函数（e）{
console.log（“onMouseOver”）；
}
....
//注意：不要将（）放在末尾

以扩展Phil的答案——无论您在大括号中放置了什么，都将在安装组件时进行评估。如果你把

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

然后，当组件装入时，React通过执行

console.log（）

来计算表达式，它返回

undefined

，因此处理程序被设置为

undefined

如果你把

onMouseOver={this.handleOnMouseOver}

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

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