如何在 React 中嵌套 onMouseOver 和 onClick 事件答案

【问题标题】：How can I nest onMouseOver and onClick events in React如何在 React 中嵌套 onMouseOver 和 onClick 事件
【发布时间】：2018-03-12 19:35:34
【问题描述】：

已经搜索了很多但仍然无法解决。我知道如何用 jQuery 制作它，但不想用这个。

gif 显示我想要的：触发onMouseOver 事件只有在鼠标按钮被按下时。

gif example

代码示例（在 ES6 类中）：

我通过数组使用map来渲染网格，所以每个方块都会有鼠标事件。我删除了一些不必要的信息以提供帮助。

someMethod() {
   ***toggle CSS***
}

render() {    
  return <div>
            {this.state.array.map((item, index) => (
               <div onMouseOver={() => {this.someMethod(item, index)}} className={item.key}></div>
            ))}
         </div>
}

我可以使用oneMouseOver 或onClick 事件，但是如何合并它们呢？

提前致谢。

【问题讨论】：

您可以设置全局 mousedown 和 mouseup 事件 (document.body.addEventListener('mousedown')) 在其中更改全局变量或修改状态中的某些内容。 mouseButtonIsDepressed 属性或类似的东西。 mousedown 设置为真，mouseup 假。然后在您的onMouseOver 中，检查该属性是否为真。
成功了！附录：我刚刚在constructor() 中添加了全局mousedown 和mouseup 事件，将变量更改为true 和false。还必须向
添加两个事件，因为仍然需要单独实现 onClick。谢谢。

标签： javascript reactjs methods onmouseover

【解决方案1】：

您可以将两者结合起来，为每种事件类型使用一种方法

mouseOverHandler(item, index){
 if(this.state.wasClicked){
  // executes only if the event click was triggered 
 }
}
    <div 
        onMouseOver={() => {this.mouseOverHandler(item, index)}} 
        onClick={() => {this.clickHandler(item, index)}} 
        className={item.key}>
    </div>

【讨论】：