基本的事件类型
React 搞了一套自己的事件类型,所以你没办法使用 TypeScript 内置提供的 MouseEvent
等等。在需要定义事件类型的时候,需要从 React 中导入:
import React, { Component, MouseEvent } from 'react';
export class Button extends Component {
handleClick(event: MouseEvent) {
event.preventDefault();
alert(event.currentTarget.tagName); // alerts BUTTON
}
render() {
return (
<button onClick={this.handleClick}>
{this.props.children}
</button>
);
}
}
React 提供的事件类型有: AnimationEvent
, ChangeEvent
, ClipboardEvent
, CompositionEvent
, DragEvent
, FocusEvent
, FormEvent
, KeyboardEvent
, MouseEvent
, PointerEvent
, TouchEvent
, TransitionEvent
, WheelEvent
。还有一个 SyntheticEvent
,用于其他所有的事件。
限制性的事件类型
如果需要限制事件类型,可以利用事件类型的泛型:
import React, { Component, MouseEvent } from 'react';
export class Button extends Component {
/*
* 这里我们将 handleClick 限制只能是在 HTMLButton 元素上
*/
handleClick(event: MouseEvent<HTMLButtonElement>) {
event.preventDefault();
alert(event.currentTarget.tagName); // alerts BUTTON
}
/*
* 支持联合类型
*/
handleAnotherClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) {
event.preventDefault();
alert('Yeah!');
}
render() {
return <button onClick={this.handleClick}>
{this.props.children}
</button>
}
}
这里的限定的类型是 TypeScript 提供的 DOM 元素类型。