javascript - react的mousedown事件类型定义？

Question

import React, {  MouseEvent } from 'react';

const handleMove = (e: MouseEvent<HTMLDivElement>) => {
    e.preventDefault();
};
headerBarRef.current?.addEventListener('mousedown', handleMove);

第二行提示

没有与此调用匹配的重载。
  第 1 个重载(共 2 个)，“(type: "mousedown", listener: (this: HTMLElement, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void | undefined”，出现以下错误。
    类型“(e: MouseEvent<HTMLDivElement>) => void”的参数不能赋给类型“(this: HTMLElement, ev: MouseEvent) => any”的参数。
      参数“e”和“ev” 的类型不兼容。
        类型“MouseEvent”缺少类型“MouseEvent<HTMLDivElement, MouseEvent>”中的以下属性: nativeEvent, isDefaultPrevented, 
isPropagationStopped, persist
  第 2 个重载(共 2 个)，“(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void | undefined”，出现以下错误。
    类型“(e: MouseEvent<HTMLDivElement>) => void”的参数不能赋给类型“EventListenerOrEventListenerObject”的参数。

应该怎么写呢？

Answer 1

你的这个地方少了一个 ：void，另外，前面也有点小问题，

改为：

const handleMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
  e.preventDefault();
};

因为，MouseEvent是属于全局命名空间的，如果你需要显式地指定它的类型，应该是使用 React.MouseEvent，这样可以正常跑了。