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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

这里的限定的类型是 TypeScript 提供的 DOM 元素类型。

我是 Pandy，一个喜欢英语的程序猿 👨‍💻

关注公众号 Yopth，回复「加群」，加入「英文技术翻译互助群」，我们加入一起充电英语 🔌

Reference

[1] TypeScript and React: Events