TSX中onClick绑定函数出现MouseEventHandler类型不兼容问题求助

问题根源 #

你混淆了两种不同的类型：React.MouseEventHandler<HTMLInputElement> 是函数类型（本质是 (event: MouseEvent<HTMLInputElement, MouseEvent>) => void），但你错误地把它当成了事件参数的类型来使用。

组件的 onClick 属性要求的是 MouseEventHandler<HTMLInputElement> 类型的函数，这类函数的参数应该是 React.MouseEvent<HTMLInputElement>（事件对象类型），而非 MouseEventHandler 本身。

你在 onKeyDown 场景下能正常工作，是因为用对了类型——React.KeyboardEvent<HTMLInputElement> 是事件对象类型，和 React.MouseEvent 属于同一类，而非函数类型。

解决方案 #

直接修正函数的参数类型，把 React.MouseEventHandler<HTMLInputElement> 换成 React.MouseEvent<HTMLInputElement> 即可：

const handleSelectAllCheckboxes = (e: React.MouseEvent<HTMLInputElement>) => {
    alert('clicked Select All');
}

修改后，你可以保持 onClick={handleSelectAllCheckboxes} 的简洁写法，无需嵌套箭头函数。

内容的提问来源于stack exchange，提问作者gene b.