reactjs - Typescript 和 React:使用解构的事件处理程序的正确类型是什么?
问题描述
在使用带有 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<HTMLButtonElement, MouseEvent>' 不可分配给类型 '{ target: Element; }'。属性“目标”的类型不兼容。“EventTarget”类型缺少“Element”类型的以下属性:attributes、classList、className、clientHeight 和 120 more.ts(2322) index.d.ts(1457, 9):预期类型来自属性“onClick” ' 这是在类型 'DetailedHTMLProps<ButtonHTMLAttributes, HTMLButtonElement>' 上声明的
有人对此有解决方案吗?我难住了。
先感谢您。
解决方案
您可以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} />
推荐阅读
- php - php 服务器发送事件聊天应用程序的行为类似于轮询
- python - 我想从一个数据框中选择其值存在/不存在于另一个数据框中的所有记录。如何使用 pyspark 数据框做到这一点?
- javascript - 如何在 Angular HttpInterceptor 中使用异步 http 请求
- makefile - 关于makefile中的执行顺序
- python - Python - 将类变量指针分配给实例方法
- arrays - 如何将单元格概括为以行显示数据的列
- java - 在java 8中合并具有不同类型和长度的多个流
- vue.js - v-on:鼠标悬停条件 VueJS 1.0.21
- python - 数据帧标题错误 - 没有预期的那么多列
- python - 如何确定嵌套列表理解的外循环和内循环?