在React中添加鼠标移动事件动态修改图片透明度的问题求助

现有代码存在3处核心功能错误：

• 监听的事件名称错误：鼠标移动触发的原生事件名为mousemove，而非不存在的nativeEvent
• 鼠标坐标获取方式错误：window对象不存在clientX属性，需要从mousemove事件的回调参数中读取坐标值
• useEffect使用不规范：缺少依赖数组和事件解绑逻辑，会导致事件重复绑定、组件卸载后内存泄漏

修复后完整代码 #

import React, { useEffect, useState }  from "react";
import "./style.css";

function Imaging() {
  const [testOpacity, setOpacity] = useState(1)

  const listenMoveEvent = (e) => {
    e.clientX > 100
     ? setOpacity(0.2)
     : setOpacity(1)
  }

  useEffect(() => {
    window.addEventListener("mousemove", listenMoveEvent);
    // 组件卸载时移除事件监听，避免内存泄漏
    return () => {
      window.removeEventListener("mousemove", listenMoveEvent);
    }
  }, []) // 空依赖数组保证事件只在组件挂载时绑定一次

  return (
    <>
      <img 
        id="xOpacityImage" 
        style={{opacity: testOpacity}}
        src={require('../../assets/img/Sidewalk.png').default}
        alt={"xOpacityImage"}
      />
    </>
  );
}
export default Imaging;

内容的提问来源于stack exchange，提问作者Mr. Dawit