属性 '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 中，这行得通，它可以接受名称，但我不知道为什么不能使用 typescript？

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

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，但是原理是一样的。编译器错误消失了。

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

Property 'name' does not exist on type 'EventTarget' - React + TypeScript

typescript

reactjs

react-tsx