React中tr标签onClick绑定函数遇TypeScript类型不匹配错误求助

错误核心 #

你给handleToggleSelected函数定义的参数类型是ChangeEvent<HTMLInputElement>，但<tr>的onClick事件触发的是鼠标点击事件（MouseEvent），两种事件类型完全不兼容，这就是TypeScript报错的根本原因。

修改步骤 #

1. 修正事件参数类型：把函数参数的类型从ChangeEvent<HTMLInputElement>改为MouseEvent<HTMLTableRowElement>（或更通用的MouseEvent）。
2. 处理target类型断言：e.target的类型是EventTarget，TypeScript无法确定其具体DOM元素类型，需要断言为HTMLElement才能安全访问tagName属性。

修改后的代码示例 #

const handleToggleSelected = (e: MouseEvent<HTMLTableRowElement>) => {
  const target = e.target as HTMLElement;
  if(target.tagName.toUpperCase() === 'TD') {
    row.toggleSelected();
  }
}

return (
  <tr
    key={row.id}
    onClick={handleToggleSelected}
    className="pointer"
  >
    {/* 表格内容 */}
  </tr>
)

补充说明 #

• 使用tagName.toUpperCase()可以统一判断逻辑，避免大小写不一致的问题。
• 如果你需要获取绑定事件的<tr>元素本身，可以用e.currentTarget，但这里你要的是实际点击的元素，所以用e.target并做类型断言是正确的做法。

内容的提问来源于stack exchange，提问作者wepro01