TypeScript React中添加onClick监听器代码报错，求助解决

错误原因 #

你定义的handleClick函数参数签名和click事件回调的要求不匹配：addEventListener的click回调第一个参数是MouseEvent对象，而不是你写的HTMLDivElement，TypeScript因此抛出类型错误。

修复方案 #

• 调整handleClick的参数，只保留事件对象；如果需要操作目标元素，通过事件对象的target属性获取（注意类型断言，因为点击可能触发在子元素上）。
• 确保你的ref类型正确声明为useRef<HTMLDivElement>(null)。

修正后的代码示例 #

import { useEffect, useRef } from 'react';

// 组件内代码
const divRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (!divRef.current) return;

  const handleClick = (e: MouseEvent) => {
    // 如果需要操作点击的div元素，用类型断言确保类型正确
    const targetDiv = e.target as HTMLDivElement;
    console.log('clicked', targetDiv);
  };

  const el = divRef.current;
  el.addEventListener('click', handleClick);
  return () => el.removeEventListener('click', handleClick);
}, [divRef]);

// 渲染部分
return <div ref={divRef}>点击测试</div>;

额外说明 #

如果不需要获取目标元素，直接简化handleClick为：

const handleClick = () => console.log('clicked');

这样也完全符合事件回调的类型要求。

内容的提问来源于stack exchange，提问作者Page not found