带有 React 问题的纯 Javascript mouseenter 和 mouseleave 事件委托答案

【问题标题】：Pure Javascript mouseenter and mouseleave event delegation with React issues带有 React 问题的纯 Javascript mouseenter 和 mouseleave 事件委托
【发布时间】：2018-12-04 15:02:52
【问题描述】：

我想在我的 React 项目中实现这样的目标 (https://creativesfeed.com/code/custom-cursors/index2.html)

我想要一个跟随鼠标坐标的自定义鼠标光标（在这种情况下是一个点，在“div”中），这很好，我可以让它工作。

我想要实现的另一件事是，当悬停在任何标记上时，自定义类将添加到自定义鼠标光标并在自定义光标离开链接时删除。问题是，每当我将鼠标悬停在标签上时，该类就会立即出现和消失。我知道 Javascript 中的 eventListener 与 jQuery 不同，我什至尝试使用 jQuery（我讨厌在 React 中使用它），但我也遇到了同样的问题。那么我做错了什么？可能是因为我在 componentDidMount() 上运行了函数？

import React, { Component } from 'react';
import Homepage from './components/Homepage';

class App extends Component {

  componentDidMount() {
    let mouse__follower = document.getElementById('mouse__follower');
    let links = document.getElementsByTagName('a');

    document.addEventListener("mousemove", (e) => {
      var x = e.clientX;
      var y = e.clientY;
      mouse__follower.style.top = `${y}px`;
      mouse__follower.style.left = `${x}px`;
    });

    let addClassToLink = (e) => {
      mouse__follower.classList.add('active');
    };

    let removeClassToLink = (e) => {
      mouse__follower.classList.remove('active');
    };

    // ALSO, IS THIS VERY BAD IN TERMS OF MEMORY CONSUMING?

    for(var i = 0, len = links.length; i < len; i++) {
      links[i].addEventListener('mouseenter', addClassToLink, false);
      links[i].addEventListener('mouseleave', removeClassToLink, false);
    };

  }

  render() {
    return (
      <div className="nu-creative">
        <div id="mouse__follower">
          <div id="mouse__follower__circle"></div>
        </div>
        <Homepage />
      </div>
    );
  }
}

export default App;

链接在另一个文件中，但我认为这不是问题。

编辑：我发现了问题。如果我删除

mouse__follower.style.top = `${y}px`;
mouse__follower.style.left = `${x}px`;

从document.addEventListener("mousemove", ...) 开始，该类已正确添加和删除，因此我必须做一些事情。可能是因为两个 eventListener 是一起触发的。

我会调查，感谢到目前为止的答案:)

【问题讨论】：

我的猜测是你添加的任何东西都是罪魁祸首。添加类时是否在光标下？

标签： javascript jquery reactjs

【解决方案1】：

看起来 React 生命周期正在困扰您。问题是 react 在决定应该完成时重新渲染 html，并且在您的渲染方法中，您正在删除内联类。

因此，按反应方式执行此操作的方法是在您使用 setState 更改的组件状态中设置一个标志，并在您的渲染方法中检查此标志以确定是否添加类到光标。

类似这样的：
<div id="mouse__follower" className={this.state.cursorActive? "active":""}>

编辑：
顺便说一句，这不相关，但请记住取消绑定在 componentWillUnmount 内的 componentDidMount 中绑定的所有事件侦听器。

【讨论】：

【解决方案2】：

问题已解决:)

包含“点”的 div 的 z-index 未设置，这导致事件触发次数过多。通过将“z-index”设置为 -1，问题得到解决。

【讨论】：