如何在拖动 React 组件的上下文中移除事件监听器

Posted 2023-03-16

【中文标题】如何在拖动 React 组件的上下文中移除事件监听器

【英文标题】：How to remove a event listener in the context of dragging a React component

【发布时间】：2020-02-10 23:03:36

【问题描述】：

释放鼠标时，mousemove 似乎没有从document 中正确删除。

https://codesandbox.io/s/dragondrop-dqs46

【问题讨论】：

我怀疑useCallback 产生了我的实际函数的一个实例，并且每次运行效果时它都是一个不同的实例。

【参考方案1】：

而不是手动添加和删除当相关，编写一个自定义钩子useEvent，它将处理程序从一个渲染存储到另一个：

useEvent.js

import  useEffect, useRef  from "react";

export default function(event, handler, element=window) 

  const savedHandler = useRef();

  useEffect(() => 
    savedHandler.current = handler;
  , [handler]);

  useEffect(() => 
    const eventListener = event => savedHandler.current(event);
    element.addEventListener(event, eventListener);
    return () => element.removeEventListener(event, eventListener);
  , [event, element]);

components/Dragon.js

useEvent("mousemove", onDrag);
useEvent("mouseup", onDragEnd);

工作笔：https://codesandbox.io/s/dragondrop-ceocx