在 Typescript 中反应事件类型答案

【问题标题】：React event type in Typescript在 Typescript 中反应事件类型
【发布时间】：2018-03-13 11:36:04
【问题描述】：

当我在我的事件处理程序中使用 MouseEvent 类型时，我无法构建我的 React/Typescript 应用程序：

private ButtonClickHandler(event: MouseEvent): void
{
    ...
}

我明白了：

error TS2322: Type '{ onClick: (event: MouseEvent) => void; children: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Type '{ onClick: (event: MouseEvent) => void; children: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
    Types of property 'onClick' are incompatible.
      Type '(event: MouseEvent) => void' is not assignable to type 'EventHandler<MouseEvent<HTMLButtonElement>>'.
        Types of parameters 'event' and 'event' are incompatible.
          Type 'MouseEvent<HTMLButtonElement>' is not assignable to type 'MouseEvent'.
            Property 'fromElement' is missing in type 'MouseEvent<HTMLButtonElement>'.`

我也尝试了MouseEvent<HTMLButtonElement>，但后来我得到了error TS2315: Type 'MouseEvent' is not generic.。

为什么？

摘自我的package.json：

 "devDependencies": {
    "@types/react": "^16.0.7",
    "@types/react-dom": "^15.5.5",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }

编辑#1：

绑定在render():

<button onClick={ this.ButtonClickHandler }>Toggle</button>

在constructor:

this.ButtonClickHandler = this.ButtonClickHandler.bind(this);

【问题讨论】：

你能告诉我们你把这个处理程序绑定到元素的代码吗？我认为这个问题可能有根本原因
你的意思是在渲染和构造函数中绑定？在编辑 #1 中添加
你试过(event: React.MouseEvent<HTMLButtonElement>)吗？
是的，同样的效果。其他人好像没有这样的问题：bennadel.com/blog/…
private ButtonClickHandler(event: React.MouseEvent<HtmlButtonElement>): void 应该可以工作

标签： reactjs typescript

【解决方案1】：

你不会相信它：将构造函数分配移动到渲染函数就足够了：

render()
{
return (
<button onClick={ this.Button_Click.bind(this) }>Toggle</button>
)}

然后MouseEvent 变为可用：

private Button_Click(event: MouseEvent): void

为什么会这样？

【讨论】：

【解决方案2】：

我认为这里发生的情况是有两种不同的类型可用：来自 jsx/lib/js/js/web.jsx 的MouseEvent（没有类型参数）和来自@types/react/ 的React.MouseEvent<T> index.d.ts（它有一个类型参数，T，它来自的元素的类型）。 Typescript 使用structural typing，因此即使它们是不同的类型，它们可以兼容。但是为了与 onClick 处理程序兼容，您需要使用 React 的版本，并为 T 使用适当的类型（HTMLElement 将起作用，或者如果您知道要附加的元素，您可以更具体处理程序）。

所以event: MouseEvent 失败，因为onClick 需要事件类型的专用版本。 event: MouseEvent<HTMLElement> 失败，因为它引用了错误的 MouseEvent 类型，即没有类型参数的类型。 React.MouseEvent<HTMLElement> 之所以有效，是因为您获得了正确的类型，为其提供所需的参数，并且生成的类型与 onClick 处理程序兼容。

【讨论】：

谢谢也帮助了我。对于开箱即用的打字稿来说，这样的基本问题似乎很遗憾。添加一个 onClick 事件需要这么多的 google fu 才能让它工作。

【解决方案3】：

我遇到了同样的问题，但能够通过从 React 显式导入 MouseEvent 来解决它

我有这个错误

import React from 'react';

但修复了这个

import React, { MouseEvent } from 'react';

【讨论】：