名称:typescript 事件处理程序的类型?

Name typescript Type for event handler?

提问人:Owen Murphy 提问时间:7/15/2023 最后编辑:CamiloOwen Murphy 更新时间:7/15/2023 访问量:21

问:

请参阅此处以实现检测外部单击组件。

    const [
        dropdown,
        setDropdown
    ] = useState<boolean>(false);
    const ref = useRef<HTMLLIElement>();

    useEffect(() => {
        const handler = (event: any) => {
            if (
                dropdown &&
            ref.current &&
            !ref.current.contains(event.target)
            ) {
                setDropdown(false);
            }
        };
        document.addEventListener('mousedown', handler);
        document.addEventListener('touchstart', handler);
        return () => {
            document.removeEventListener('mousedown', handler);
            document.removeEventListener('touchstart', handler);
        };
    }, [dropdown]);

是什么类型?我尝试这样做,但它说在函数调用中使用时没有函数重载。eventChangeEvent<HTMLLIElement>.addEventListener()

任何帮助都是值得赞赏的。

HTML ReactJS TypeScript 事件

评论


答:

1赞 Jerryh001 7/15/2023 #1

如果您使用的是 VS Code,请将鼠标悬停在函数 () 上,您将看到如下内容:.addEventListener

(method) Document.addEventListener<"mousedown">(type: "mousedown", listener: (this: Document, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)

所以类型是:eventMouseEvent

const handler = (event: MouseEvent) => {
    // ...
};

document.addEventListener('mousedown', handler);

仅供参考:按住 Ctrl 并单击该方法将带您进入类型定义,您可以在那里查看有关该函数的更多详细信息。

评论

0赞 Chaudhari Devam 7/15/2023
是的@Jerryh001,它可能是 MouseEvent |触摸事件