Обработка событий

В документации React по обработке событий показано, как добавить обработчик события к элементу React. Для типизации этих обработчиков событий можно использовать типы SyntheticEvent<T>, например:

import {useState} from 'react';
import * as React from 'react';


component MyComponent() {
  const [state, setState] = useState({count: 0});


  const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {
    // To access your button instance use `event.currentTarget`.
    event.currentTarget as HTMLButtonElement;


    setState(prevState => ({
      count: prevState.count + 1,
    }));
  };


  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Существуют также более специализированные типы синтетических событий, например SyntheticKeyboardEvent<T>, SyntheticMouseEvent<T> или SyntheticTouchEvent<T>. Типы SyntheticEvent<T> обычно принимают один аргумент типа: тип HTML-элемента, для которого был задан обработчик события.

Если вы не хотите указывать тип экземпляра элемента, можно также использовать SyntheticEvent без аргументов типа, например: SyntheticEvent<>.

Примечание: Чтобы получить экземпляр элемента, например HTMLButtonElement в примере выше, часто ошибочно используют event.target вместо event.currentTarget. event.currentTarget следует использовать потому, что event.target может ссылаться не на тот элемент из-за всплытия событий.

Примечание: React использует собственную систему событий, поэтому важно использовать типы SyntheticEvent вместо типов DOM, таких как Event, KeyboardEvent и MouseEvent.

Типы SyntheticEvent<T>, предоставляемые React, и соответствующие им события DOM:

• SyntheticEvent<T> для Event
• SyntheticAnimationEvent<T> для AnimationEvent
• SyntheticCompositionEvent<T> для CompositionEvent
• SyntheticInputEvent<T> для InputEvent
• SyntheticUIEvent<T> для UIEvent
• SyntheticFocusEvent<T> для FocusEvent
• SyntheticKeyboardEvent<T> для KeyboardEvent
• SyntheticMouseEvent<T> для MouseEvent
• SyntheticPointerEvent<T> для PointerEvent
• SyntheticDragEvent<T> для DragEvent
• SyntheticWheelEvent<T> для WheelEvent
• SyntheticTouchEvent<T> для TouchEvent
• SyntheticClipboardEvent<T> для ClipboardEvent
• SyntheticTransitionEvent<T> для TransitionEvent

См. также​

• Функции — обработчики событий типизируются как типы функций
• Обобщения — типы синтетических событий являются обобщёнными по типу элемента DOM