自定义事件抛出 TS2769：没有重载匹配此调用

Question

我正在尝试在 React 中创建一个 TypeScript 组件，并希望添加一个自定义拖动开始事件。 我现在有以下代码：

import React, {RefObject, useEffect, useState} from "react";

type Props = {
    id: string,
    effect: DataTransfer["dropEffect"],
    ref: RefObject<HTMLDivElement>,
    onDragStart: any
}

export default function useDrag({id, effect, ref, onDragStart}: Props) {
    const [dragState, updateDragState] = useState<string>("draggable");

    const dragStart = (event: React.DragEvent<HTMLDivElement>): any => {
        updateDragState("dragStart");
        event.dataTransfer.dropEffect = effect;
        event.dataTransfer.setData("source", id);
         onDragStart && onDragStart()
    }

    useEffect(() => {
        const element = ref.current;

        if (element) {
            element.setAttribute("draggable", String(true));
            element.addEventListener("dragstart", dragStart);

            return () => {
                element.removeEventListener("dragstart", dragStart);
            }

        }

    })

}

但是我在尝试添加自定义事件时总是收到以下错误：

TS2769：没有重载匹配此调用。 重载 1 of 2, '(type: "dragstart", listener: (this: HTMLDivElement, ev: DragEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void'，给出以下错误。 '(event: React.DragEvent) => any' 类型的参数不能分配给 '(this: HTMLDivElement, ev: DragEvent) => any' 类型的参数。 参数 'event' 和 'ev' 的类型不兼容。 “DragEvent”类型缺少“DragEvent”类型中的以下属性：nativeEvent、isDefaultPrevented、isPropagationStopped、persist Overload 2 of 2、“（类型：字符串，侦听器：EventListenerOrEventListenerObject，选项？：boolean | AddEventListenerOptions | undefined）：void”，给出了以下错误。 '(event: React.DragEvent) => any' 类型的参数不可分配给 'EventListenerOrEventListenerObject' 类型的参数。 类型 '(event: React.DragEvent) => any' 不可分配给类型 'EventListener'。 参数 'event' 和 'evt' 的类型不兼容。 “Event”类型缺少“DragEvent”类型中的以下属性：dataTransfer、altKey、按钮、按钮等 19 个。

Answer 1

React 使用Synthetic Events进行回调，因此React.DragEvent的类型不等于addEventListener期望的类型。 此外，您不应该使用 ref 和 useEffect 注册事件回调，您可以使用

<div draggable="true" onDragStart={handleDragStart} />