Question

我想在我的React项目（https://creativesfeed.com/code/custom-cursors/index2.html）中实现类似的目标

我希望有一个自定义鼠标光标（在本例中为“ div”中的点），该光标遵循鼠标的坐标，这很好，我可以使其工作。

我要实现的另一件事是，将鼠标悬停在ANY标记上时，会将自定义类添加到自定义鼠标光标，并在自定义光标离开链接时将其删除。问题是，每当我将鼠标悬停在标签上时，该类就会出现并立即消失。我知道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一起触发了。

我将进行调查，谢谢您到目前为止的回答：）

Answer 1

好像反应的生命周期正在困扰着您。事实是，每当它决定应完成时，react都会重新渲染html，然后在render方法中删除内联类。

因此，对此做出反应的方法是在用setState进行更改的组件状态中设置一个标志，并在render方法中检查该标志以决定是否添加光标的类。

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

修改：
顺便说一句，这无关紧要，但是请记住要取消绑定componentDidMount内componentWillUnmount中所有的事件监听器。

Answer 2

已解决的问题：）

未设置包含“点”的div的z索引，这导致事件触发太多次。通过将“ z-index”设置为-1，可以解决此问题。

具有React问题的纯Javascript mouseenter和mouseleave事件委托

2 个答案: