尝试在 TypeScript/JS 中连接 useRef eventListeners 时出错 [关闭]答案

【问题标题】：Error trying to connect useRef eventListeners in TypeScript/JS [closed]尝试在 TypeScript/JS 中连接 useRef eventListeners 时出错 [关闭]
【发布时间】：2022-01-10 01:46:31
【问题描述】：

使用 typescript，尝试使用 useRef 和 useEffect 挂钩将 eventListener 连接到容器。我们看到的错误是：没有重载匹配这个调用。重载 1 of 2, '(type: keyof HTMLElementEventMap, listener: (this: HTMLDivElement, ev: WheelEvent | MouseEvent | UIEvent | Event | ClipboardEvent | ... 12 more ... | TransitionEvent) => any, options?: boolean | ... 1 更多 ... | 未定义）：无效 |未定义'，给出了以下错误。 “WheelEvent”类型的参数不能分配给“keyof HTMLElementEventMap”类型的参数。重载 2 of 2，'（类型：字符串，侦听器：EventListenerOrEventListenerObject，选项？：布尔值 | AddEventListenerOptions | 未定义）：无效 |未定义'，给出了以下错误。 “（e：WheelEvent）=> void”类型的参数不可分配给“EventListenerOrEventListenerObject”类型的参数。类型“（e：WheelEvent）=> void”不可分配给类型“EventListener”。参数“e”和“evt”的类型不兼容。 “Event”类型缺少“WheelEvent”类型的以下属性：deltaMode，

const zoomRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    zoomRef?.current?.addEventListener('WheelEvent', scroll)
    return () => {
      zoomRef?.current.removeEventListener('WheelEvent', scroll)
    }
  }, [])

【问题讨论】：

标签： reactjs typescript react-hooks addeventlistener event-listener

【解决方案1】：

没有名为“WheelEvent”的事件，它是“轮子”。

useEffect(() => {
    const currentZoomRef = zoomRef?.current;

    currentZoomRef?.addEventListener("wheel", scroll);

    return () => {
      currentZoomRef?.removeEventListener("wheel", scroll);
    };
}, []);

typescript错误是由“scroll”函数的定义引起的，参数应该是WheelEvent类型

const scroll = (e: WheelEvent) => {
   console.log(e);
};

一个工作的demo。

【讨论】：