类型“EventTarget”上不存在属性“名称”-React + TypeScript答案

【问题标题】：Property 'name' does not exist on type 'EventTarget' - React + TypeScript类型“EventTarget”上不存在属性“名称”-React + TypeScript
【发布时间】：2019-08-18 17:49:48
【问题描述】：

这是我的代码：

<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 中，这是可行的，它可以接受名称，但我不知道为什么不能打字？

【问题讨论】：

标签： reactjs typescript react-tsx

【解决方案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
*/

【讨论】：

同意使用currentTarget。您还可以优化 event.target 而不是强制转换。 if (e.target instanceof HTMLButtonElement) { e.target.name; }
@TLadd true，这样会更好