“name”属性在类型“EventTarget”上不存在 - React + TypeScript

Question

这是我的代码：

<Button
  disabled={filter === 'Active'}
  size='md'
  color='primary'
  name='Active' // complete = false
  onClick={this.handleFilterClick}
>
  Active
</Button>

在我的函数处理程序中，我在事件上遇到了错误。

handleFilterClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    // continue here
     const { name } = e.target;

它说：

Property 'name' does not exist on type 'EventTarget'.

我也尝试了以下方法：

(e:  React.MouseEvent<HTMLInputElement, MouseEvent> &  React.MouseEvent<HTMLButtonElement, MouseEvent>) 

元素的事件类型是什么？在 JavaScript 中，可以接受 name，但我不知道为什么 TypeScript 不行。

- gpbaculio

Answer 1

event.target是事件被触发的元素，不一定是事件中定义的HTMLButtonElement。

然而，如果使用event.currentTarget，则可以避免此错误：

const { name } = event.currentTarget;

如果必须使用event.target本身，您需要进行强制类型转换：

const { name } = event.target as HTMLButtonElement;

从 typings 中：

/**
  * currentTarget - a reference to the element on which the event listener is registered.
  *
  * target - a reference to the element from which the event was originally dispatched.
  * This might be a child element to the element on which the event listener is registered.
  * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
*/

- Agney

---

赞同使用currentTarget。你也可以细化event.target而不是强制转换。if (e.target instanceof HTMLButtonElement) { e.target.name; } - TLadd

@TLadd 确实，那将是更好的方式。 - Agney

Answer 2

虽然@Agney提出的解决方案在大多数情况下可能有效，但当我使用事件委托时它却失败了——我想要访问的属性位于子元素上，即event.target而不是event.currentTarget。

我通过扩展event.target的类型来安抚TS编译器：

const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
  // Hey, compiler, the event target can have any of the properties of an SVG element:
  const target: EventTarget & React.SVGProps<SVGSVGElement> = e.target
  if (target.id) {
    // ...
  }

示例中使用的是id属性，而不是name，但原理相同。编译器错误已消除。

- HynekS