Javascript 如何在react中获取容器的ScreenX事件？

嗨，当指针在容器/图像上移动时，我正在尝试获取screenX事件（e.screenX）

一旦我得到screenX值，如果<50%，它应该显示“我走了”，如果>=50%，它应该显示“我走了”

我已经尝试获取screenX，但是我将console.log设置为“未定义”，而不是一个值

下面是我的代码：

import { useEffect, useState } from "react";


 function useScreenX() {
 const [screenPosition, setScreenPosition] = useState(0);

 function handleDocument() {
  const { screenX: currentScreenX } = document.querySelector("#screen-log");     // I'm doing something wrong here//

 setScreenPosition(currentScreenX);

 console.log(currentScreenX);


}

  useEffect(() => {
     window.addEventListener("mousemove", handleDocument);

    return () =>
     window.removeEventListener("mousemove", handleDocument);
   }, []);

   return (
       <div id="screen-log">
        <h1>My Container</h1>
       </div>
          );
     }

       export default useScreenX;



     CSS Style:
           #screen-log {
                 background-color: gold;
                 width: 100vw;
                 height: 200px;
                       }

从“react”导入{useffect，useState}；
函数useScreenX（）{
常量[屏幕位置，设置屏幕位置]=使用状态（0）；
函数处理文档（）{
const{screenX:currentScreenX}=document.querySelector（“#屏幕日志”）；//我在这里做错了什么//
设置屏幕位置（currentScreenX）；
console.log（currentScreenX）；
}
useffect（（）=>{
window.addEventListener（“mousemove”，handleDocument）；
return（）=>
window.removeEventListener（“mousemove”，handleDocument）；
}, []);
返回(
我的容器
);
}
导出默认useScreenX；
CSS样式：
#屏幕日志{
背景颜色：金色；
宽度：100vw；
高度：200px；
}

你就快到了。只需进行一些小的修正：

您应该在

处理文档中使用该事件

screenX返回一个数字，您正试图将其存储为一个对象

您需要在特定的div上跟踪鼠标移动，但您正在将侦听器附加到整个窗口

handleDocument

函数自动获取事件对象。使用它可以获得

screenX

。还可以在

useffect

中获取元素，并将侦听器附加到该元素

代码段：

导出默认函数App（）{
常量[屏幕位置，设置屏幕位置]=使用状态（0）；
功能处理文档（e）{
常数screenX=e.screenX；
设置屏幕位置（屏幕X）；
console.log（screenX）；
}
useffect（（）=>{
文件
.getElementById（“屏幕日志”）
.addEventListener（“mousemove”，handleDocument）；
return（）=>
文件
.getElementById（“屏幕日志”）
.removeEventListener（“mousemove”，handleDocument）；
}, []);
返回(
我的容器
);
}

你就快到了。只需进行一些小的修正：

您应该在

处理文档中使用该事件

screenX返回一个数字，您正试图将其存储为一个对象

您需要在特定的div上跟踪鼠标移动，但您正在将侦听器附加到整个窗口

handleDocument

函数自动获取事件对象。使用它可以获得

screenX

。还可以在

useffect

中获取元素，并将侦听器附加到该元素

代码段：

导出默认函数App（）{
常量[屏幕位置，设置屏幕位置]=使用状态（0）；
功能处理文档（e）{
常数screenX=e.screenX；
设置屏幕位置（屏幕X）；
console.log（screenX）；
}
useffect（（）=>{
文件
.getElementById（“屏幕日志”）
.addEventListener（“mousemove”，handleDocument）；
return（）=>
文件
.getElementById（“屏幕日志”）
.removeEventListener（“mousemove”，handleDocument）；
}, []);
返回(
我的容器
);
}

您需要将

事件

参数添加到处理函数

函数handleDocument（event）…。

然后获取该事件对象的属性。。你说得对。谢谢。您需要将

event

参数添加到处理程序函数

函数handleDocument（event）…

中，然后获取该事件对象的属性。。你说得对。谢谢，非常感谢。。。你解释得很好，你的回答真的让我前进了。谢谢你。！！非常感谢你。。。你解释得很好，你的回答真的让我前进了。谢谢你。！！