React 中事件的类型定义

基本的事件类型

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 元素类型。

Reference

[1] TypeScript and React: Events