typescript 在打字稿中反应事件类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46524815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React event type in Typescript
提问by tBlabs
I can't build my React/Typescript app when I use MouseEventtype in my event handler:
当我MouseEvent在我的事件处理程序中使用type时，我无法构建我的 React/Typescript 应用程序：
private ButtonClickHandler(event: MouseEvent): void
{
...
}
I get:
我得到：
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>'.`
I also tried MouseEvent<HTMLButtonElement>but then I got error TS2315: Type 'MouseEvent' is not generic..
我也尝试过，MouseEvent<HTMLButtonElement>但后来我得到了error TS2315: Type 'MouseEvent' is not generic..
Why?
为什么？
Excerpt from my package.json:
摘自我的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"
}
Edit #1:
编辑#1：
Binding in render():
绑定在render()：
<button onClick={ this.ButtonClickHandler }>Toggle</button>
in constructor:
在constructor：
this.ButtonClickHandler = this.ButtonClickHandler.bind(this);
回答by wiml
I think what's happening here is that there are two distinct types available: MouseEventfrom jsx/lib/js/js/web.jsx (which has no type parameters), and React.MouseEvent<T>from @types/react/index.d.ts (which has one type parameter, T, the type of the element from which it came). Typescript uses structural typing, so even though they are distinct types, they canbe compatible. But in order to be compatible with the onClickhandler you need to use React's version, with an appropriate type for T(HTMLElementwill work, or you can be more specific if you know what element you're attaching this handler to).
我认为这里发生的事情是有两种不同的类型可用：MouseEvent来自 jsx/lib/js/js/web.jsx（没有类型参数）和React.MouseEvent<T>来自 @types/react/index.d.ts（有一个类型参数，，T它来自的元素的类型）。Typescript 使用结构类型，因此即使它们是不同的类型，它们也可以兼容。但是为了与onClick处理程序兼容，您需要使用 React 的版本，使用适当的类型 for T(HTMLElement将起作用，或者如果您知道将此处理程序附加到哪个元素，则可以更具体)。
So event: MouseEventfails because onClickrequires the specialized version of the event type. event: MouseEvent<HTMLElement>fails because it refers to the wrong MouseEventtype, the one without a type parameter. React.MouseEvent<HTMLElement>works because you get the proper type, give it the parameter it needs, and the resulting type is compatible with the onClickhandler.
所以event: MouseEvent失败是因为onClick需要事件类型的专门版本。event: MouseEvent<HTMLElement>失败是因为它引用了错误的MouseEvent类型，即没有类型参数的类型。React.MouseEvent<HTMLElement>之所以有效，是因为您获得了正确的类型，为其提供了所需的参数，并且生成的类型与onClick处理程序兼容。
回答by Matt Dell
I had the same issue but was able to fix it by explicity importing the MouseEventfrom React
我有同样的问题，但能够通过显式导入MouseEventfromReact
I had the error with this
我有这个错误
import React from 'react';
But fixed with this
但是用这个解决了
import React, { MouseEvent } from 'react';
回答by tBlabs
You won't belive it: It was enough to move constructor assigment to render function:
你不会相信它：将构造函数赋值移动到渲染函数就足够了：
render()
{
return (
<button onClick={ this.Button_Click.bind(this) }>Toggle</button>
)}
Then MouseEventbecome avaliable:
然后MouseEvent变得可用：
private Button_Click(event: MouseEvent): void
Why this is happening?
为什么会这样？
