类型“EventTarget”上不存在属性“name”-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 中，这有效，它可以接受名称，但我不知道为什么不打字稿？

Answer 1

event.target是从中分派元素的元素，不一定必须是HTMLButtonElement事件中定义的元素。

但是，如果您使用event.currentTarget，您将看到此错误消失：

const { name } = event.currentTarget;

如果必须使用event.target自身，则必须强制转换对象：

const { name } = event.target as HTMLButtonElement;

从打字：

/**
  * 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
*/