TypeScript and React: Events (all)

https://fettblog.eu/typescript-react/events/

Basic Event Handling

React sử dụng hệ thống sự kiện của riêng nó. Đó là lý do tại sao bạn không thể sử dụng MouseEvents điển hình hoặc tương tự trên các phần tử của mình. Bạn cần sử dụng phiên bản React cụ thể, nếu không bạn sẽ gặp lỗi biên dịch.

May mắn thay, các kiểu gõ trong React cung cấp cho bạn sự tương đương phù hợp với từng sự kiện mà bạn có thể quen thuộc từ DOM chuẩn. Họ thậm chí có cùng một cái tên, đôi khi có thể khó khăn. Bạn cần phải cụ thể với ví dụ: React.MouseEvent hoặc nhập kiểu gõ MouseEvent ngay từ mô-đun 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>
  }
}

Events supported are: AnimationEvent, ChangeEvent, ClipboardEvent, CompositionEvent, DragEvent, FocusEvent, FormEvent, KeyboardEvent, MouseEvent, PointerEvent, TouchEvent, TransitionEvent, WheelEvent. As well as SyntheticEvent, for all other events.

Restrictive Event Handling

Nếu bạn muốn giới hạn trình xử lý sự kiện của mình ở các phần tử cụ thể, bạn có thể sử dụng một phần tử chung để cụ thể hơn:

import React, { Component, MouseEvent } from 'react';
export class Button extends Component {
  /*
   Here we restrict all handleClicks to be exclusively on 
   HTMLButton Elements
  */
  handleClick(event: MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
    alert(event.currentTarget.tagName); // alerts BUTTON
  }
  /* 
    Generics support union types. This event handler works on
    HTMLButtonElement and HTMLAnchorElement (links).
  */
  handleAnotherClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) {
    event.preventDefault();
    alert('Yeah!');
  }
  render() {
    return <button onClick={this.handleClick}>
      {this.props.children}
    </button>
  }
}

Tất cả các định nghĩa kiểu phần tử HTML đều có trong kiểu DOM mặc định của TypeScript. Đừng quên thêm dom thư viện (xem phần bắt đầu).

Where’s InputEvent?

Nếu bạn đến từ Flow, bạn sẽ nhận thấy rằng InputEvent (SyntheticInputEvent tương ứng) không được hỗ trợ bởi các kiểu gõ TypeScript. Điều này chủ yếu là do InputEvent vẫn là một giao diện thử nghiệm và không được hỗ trợ đầy đủ bởi tất cả các trình duyệt. Nếu bạn sử dụng thuộc tính onInput từ tất cả các phần tử đầu vào, bạn sẽ thấy rằng giao diện cho onInput sử dụng bất kỳ cho giao diện sự kiện. Điều này sẽ thay đổi trong tương lai.

Để cụ thể hơn một chút trong mã của bạn, bạn có thể nhập SyntheticEvent từ các kiểu gõ React.

import React, { Component, SyntheticEvent } from 'react';
export class Input extends Component {
  handleInput(event: SyntheticEvent) {
    event.preventDefault();
    // ...
  }
  render() {}
}