EyeBall不会关注onMouseMove事件

编程问答 2022-06-10

问题描述

我正在尝试使用react使眼睛跟随网页中的光标。我已经成功使用香草HTML，CSS和JS完成了此操作，但在使用React时遇到了麻烦。我使用onMouseMove调用了事件侦听器，但只有在单击网页后才能使用。请告诉我，我在做什么错了。

这是我的组件：

import React,{ Component } from "react";
import "./Eye.css";

class Eye extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    left: 0,top: 0,};

  componentDidMount() {
    window.addEventListener("mousemove",this._onMouseMove);
  }

  _onMouseMove = (e) => {
    var balls = document.getElementsByClassName("ball");

    console.log(e.nativeEvent);

    var x = (e.clientX * 100) / window.innerWidth + "%";
    var y = (e.clientY * 100) / window.innerHeight + "%";

    balls[0].style.left = x;
    balls[0].style.top = y;
    balls[0].style.transform = "translate(-" + x + ",-" + y + ")";

    this.setState({ left: x,top: y });
  };
  render() {
    return (
      <div className='eyes'>
        <div className='eye'>
          <div className='ball'></div>
        </div>
      </div>
    );
  }
}

export default Eye;

这是我的主要App.js：

import React,{ useState,useEffect } from "react";
import "./App.css";
import Eye from "./components/Eye";

function App() {

  return (
    <div className='App'>
      <Eye onMouseMove={(event) => this.handleMouse(event)} />
    </div>
  );
}

export default App;

更新＃1：我没有意识到事件侦听器在检查模式下不起作用。一旦退出检查模式，它就可以正常工作。我还更改了事件监听器，以便事件监听器不会占用太多内存。但是，我认为自从移动鼠标以来，还是有些问题。对如何改善它有帮助吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

eventseventseventsjavascriptonmousemovereactjsreactjsreactjsreactjs