Javascript 未检测到鼠标离开时的事件

我有一个

div

，当鼠标进入或离开它的表面时，它应该会改变它呈现的内容：

div

连接到以下方法：

  mouseOut: function() {
    console.log("Mouse out!!!");
    this.setState({flipped: false});
  },

  mouseOver: function() {
    console.log("Mouse over!!!");
    this.setState({flipped: true});
  },

onMouseOver

事件运行良好。但是，

onMouseOut

没有任何效果，而且看起来好像没有调用

mouseOut

函数

除了

mouseOut

之外，我还尝试了

onMouseLeave

和

onMouseDown

但仍然没有效果

---

如何使React组件检测到鼠标已移出？

将部分代码连接在一起的方式一定有问题，因为这两种方法似乎都很好

以下是JSFIDLE中的一个工作示例：

尝试将其与代码进行比较，也许您可以发现差异。可能出错的事情：

• 你拼错了道具的名字。事件处理程序是camelCase-如果您意外地使用了错误的大小写，例如

  mouseout

  ，它们将被忽略
• 您意外地指定了函数的返回值而不是函数本身，例如，

  mouseOut={this.mouseOut（）}

  -该属性将未定义，不会调用任何内容

---

您应该制作一个演示小提琴，以便我们可以帮助您。查看您的组件不可能知道出了什么问题，也不可能知道您使用的是什么浏览器？