时间戳

首页 > 解决方案 > 带有 React 问题的纯 Javascript mouseenter 和 mouseleave 事件委托

javascript - 带有 React 问题的纯 Javascript mouseenter 和 mouseleave 事件委托

问题描述

我想在我的 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 是一起触发的。

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

标签： javascriptjqueryreactjs

解决方案

看起来反应生命周期正在与你相处。问题是，当它决定应该完成时，react 会重新渲染 html，并且在您的渲染方法中，您正在删除内联类。

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

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

编辑：
顺便说一句，这不相关，但请记住取消绑定所有绑定componentDidMount在componentWillUnmount.

推荐阅读