时间戳

首页 > 解决方案 > 在反应中，如何订阅文档 mousemove？

reactjs - 在反应中，如何订阅文档 mousemove？

问题描述

这是我在香草 JavaScript 中的代码

document.addEventListener('mousemove', function (e) {
   console.log(e.pageX) //just a placeholder code
})

我的问题是：如何在反应中复制这段代码（我使用反应钩子）？我想订阅广泛的事件文档，并在特定组件中可用

标签： reactjsreact-hooks

解决方案

您应该使用 useEffect 进行订阅。在返回函数中，您应该添加清理函数以释放资源。

  useEffect(() => {
    const mouseListener = (e) => {
       console.log(e.pageX) //just a placeholder code
    })

    document.addEventListener('mousemove', mouseListener);

    // Specify how to clean up after this effect:
    return function cleanup() {
      document.removeEventListener('mousemove', mouseListener);
    };
  });

推荐阅读