如何在反应中获取容器的 ScreenX 事件?

Question

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

一旦我得到 screenX 值，如果<50%，它应该显示"我是左"，如果>=50%，它应该显示"我是右"。

我试图获取 screenX，但我得到了控制台.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;
}

Answer 1

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

1. 您应该在handleDocument中使用该事件
2. screenX 返回一个数字，您正在尝试将其存储为对象
3. 您需要在特定div 上跟踪鼠标移动，但您将侦听器附加到整个窗口。

handleDocument函数自动获取事件对象。用它来获得screenX.同时获取useEffect中的元素，并将侦听器附加到该元素。

代码的工作副本在代码沙箱中

代码片段：

export default function App() {
const [screenPosition, setScreenPosition] = useState(0);
function handleDocument(e) {
const screenX = e.screenX;
setScreenPosition(screenX);
console.log(screenX);
}
useEffect(() => {
document
.getElementById("screen-log")
.addEventListener("mousemove", handleDocument);
return () =>
document
.getElementById("screen-log")
.removeEventListener("mousemove", handleDocument);
}, []);
return (
<div id="screen-log">
<h1>My Container</h1>
</div>
);
}