当我在 React 中使用事件处理程序时,我遇到了 Typescript 严格性的问题。具体来说,我无法使用对象解构handleClick()
进行的功能onClick={handleClick}
属性。
这是不干净的版本,它是唯一一个打字稿没有抱怨地接受的版本:
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
const target: Element = event.target as Element
// ...other code goes here
}
这是干净的版本,打字稿会抛出错误:
const handleClick = ({ target }: { target: Element }) => {
// ...other code goes here
}
第二个代码块(不干净的版本)导致 Typescript 抛出错误。当我将鼠标悬停在 onClick={handleClick} 属性上时,会显示这个令人沮丧的神秘错误:
类型“({ target }: { target: Element; }) => void”不可分配给类型“MouseEventHandler”。
参数“__0”和“event”的类型不兼容。
类型“MouseEvent”不可分配给类型“{ target: Element; }'。
属性“目标”的类型不兼容。
类型“EventTarget”缺少类型“Element”中的以下属性:attributes、classList、className、clientHeight 和 120 more.ts(2322)
index.d.ts(1457, 9):预期类型来自属性“onClick”,该属性在类型“DetailedHTMLProps”上声明
有人有解决办法吗?我很困惑。
先感谢您。
你可以只使用相同的类型React.MouseEvent<HTMLButtonElement>
为解构参数。这将推断出正确的类型target
。你可能想要使用currentTarget
不过,这是处理程序附加到的元素,而不是target
,这是事件发生的元素。对于按钮来说,它们是相同的,但 TypeScript 只能推断出实际的元素类型currentTarget
.
import * as React from "react";
const handleClick = ({ target, currentTarget }: React.MouseEvent<HTMLButtonElement>) => {
// target: EventTarget
// currentTarget: EventTarget & HTMLButtonElement
// ...other code goes here
}
const elt = <button onClick={handleClick} />
游乐场链接 https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwCwAUI7hAHarwAWyrAJgDZYAwv2C4A1nAC8cABQBvODGRQA5lhgAaOLgCuUSqxgAVFevgBfAFyYqMAHQBZCLtRYAogDcsRgDwAJY0cAGQAhXRgYNndBEB8YAD4ASmkEuHlGOCy4AHocpTMNGy940zUNTOy8nX1DE0KYYu8jMvM4ADI4QJDwyOjY+MZKrOr7MYgYTiwoHQheLDhVCCx0KcpGCyGGFnZ4LH54GV8AIwio1jg2ETFxKXluPkFriQtchMYgA
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)