带有React问题的纯Javascript mouseenter和mouseleave事件委派

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生命周期正困扰着你。问题是，只要react决定应该重新渲染html，它就会重新渲染，并且在您的渲染方法中，您将删除内联类。

因此，实现这一反应的方法是在组件的状态中设置一个标志，该标志随setState而更改，并在渲染方法中检查该标志，以决定是否将类添加到光标中。

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

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

Answer 2

问题已解决：(

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