在mousemove上与React创建一个黄色圆圈
我正在尝试在Mousemove上与React创建一个圆形光标，但什么也没有发生。 这是我跟踪鼠标运动的组件：
import React, { useState, useEffect } from "react";
function Cursor() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const logMousePosition = (e) => {
setX(e.clientX);
setY(e.clientY);
e.target.setAttribute("style", "top: " + y + "px; left: " + x + "px;");
};
useEffect(() => {
document.addEventListener("mousemove", logMousePosition);
}, []);
return <span></span>;
}
export default Cursor;
I am trying to create a circle cursor on mousemove with react, but nothing is happening.
This is the component where I track the mouse movements:
import React, { useState, useEffect } from "react";
function Cursor() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const logMousePosition = (e) => {
setX(e.clientX);
setY(e.clientY);
e.target.setAttribute("style", "top: " + y + "px; left: " + x + "px;");
};
useEffect(() => {
document.addEventListener("mousemove", logMousePosition);
}, []);
return <span></span>;
}
export default Cursor;
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
设置事件处理程序，以使其每次都有更改
导出默认光标时将其运行。
Set up an event handler to have it re run the function each time there is a change
export default Cursor;
现在正在工作。我更改了这条线：
进入：
我想这是因为现在它在每个渲染上都动态地计算鼠标的位置。
如果有人有更好的解释，我将不胜感激。
It's working now. I changed this line:
into:
I guess it's because now it's calculating the position of the mouse dynamically on every render.
If anyone has a better explanation I'd appreciate it.