How do you type event handlers?

ReactJunior~1 min read

The basic principle

All events are descendants of React.SyntheticEvent.
Handlers are tied to an element: HTMLInputElement, HTMLButtonElement, HTMLFormElement, HTMLDivElement, and so on.
Convenient callback aliases: React.MouseEventHandler<T>, React.ChangeEventHandler<T>, and others.

javascript

// The general form
const handle = (e: React.SyntheticEvent<HTMLDivElement>) => { /* ... */ };

// With the alias (recommended, shorter)
const onClick: React.MouseEventHandler<HTMLButtonElement> = (e) => { /* ... */ };

Common cases

Click (mouse)

javascript

const onClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
  e.preventDefault();
};

Change (input, select, textarea)

javascript

const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  const value = e.currentTarget.value; // correctly typed
};

Submit (form)

javascript

const onSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
  e.preventDefault();
};

Keyboard

javascript

const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
  if (e.key === "Enter") { /* ... */ }
};

Focus / Blur

javascript

const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => { /* ... */ };
const onBlur:  React.FocusEventHandler<HTMLTextAreaElement> = (e) => { /* ... */ };

Pointer / Mouse / Wheel

javascript

const onPointerDown: React.PointerEventHandler<HTMLDivElement> = (e) => {};
const onMouseEnter:  React.MouseEventHandler<HTMLDivElement>   = (e) => {};
const onWheel:       React.WheelEventHandler<HTMLDivElement>   = (e) => {};

Drag & Drop

javascript

const onDragStart: React.DragEventHandler<HTMLDivElement> = (e) => {};
const onDrop:      React.DragEventHandler<HTMLDivElement> = (e) => {
  e.preventDefault();
};

Clipboard

javascript

const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (e) => {
  const text = e.clipboardData.getData("text");
};

Touch (mobile)

javascript

const onTouchStart: React.TouchEventHandler<HTMLDivElement> = (e) => {};

Animation / Transition

javascript

const onAnimationEnd: React.AnimationEventHandler<HTMLDivElement> = (e) => {};
const onTransitionEnd: React.TransitionEventHandler<HTMLDivElement> = (e) => {};

Useful techniques

1) `target` vs `currentTarget`

Use e.currentTarget - it is always typed as the element the handler is attached to.
e.target can be a nested node and is typed more broadly (EventTarget).

javascript

const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  // correct
  e.currentTarget.value;
  // e.target.value - will not compile without a type cast
};

2) Inlining it directly in a component's props

javascript

<button onClick={(e: React.MouseEvent<HTMLButtonElement>) => { /* ... */ }} />

3) The type of a handler prop in your own components

javascript

type Props = {
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
};
const MyButton = ({ onClick }: Props) => <button onClick={onClick}>OK</button>;

Or "borrow" the signature from the native element:

javascript

type ButtonProps = {
  onClick?: React.ComponentProps<"button">["onClick"];
};

4) A handler that reads the whole form

javascript

const onSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
  e.preventDefault();
  const form = e.currentTarget;
  const data = new FormData(form);
  const email = data.get("email");
};

5) A generic callback with a type parameter

javascript

function handleChange<T extends HTMLInputElement | HTMLTextAreaElement>(
  e: React.ChangeEvent<T>
) {
  console.log(e.currentTarget.value);
}

Quick type reference

React.MouseEvent<T> / React.MouseEventHandler<T>
React.ChangeEvent<T> / React.ChangeEventHandler<T>
React.FormEvent<T> / React.FormEventHandler<T>
React.KeyboardEvent<T> / React.KeyboardEventHandler<T>
React.FocusEvent<T> / React.FocusEventHandler<T>
React.PointerEvent<T> / React.PointerEventHandler<T>
React.DragEvent<T> / React.DragEventHandler<T>
React.ClipboardEvent<T> / React.ClipboardEventHandler<T>
React.WheelEvent<T> / React.WheelEventHandler<T>
React.TouchEvent<T> / React.TouchEventHandler<T>
React.AnimationEvent<T> / React.AnimationEventHandler<T>
React.TransitionEvent<T> / React.TransitionEventHandler<T>

Where T is the specific DOM element: HTMLInputElement, HTMLButtonElement, HTMLDivElement, HTMLFormElement, HTMLSelectElement, HTMLTextAreaElement, HTMLAnchorElement, and so on.

Typical mistakes

Using any in handlers - you lose hints and type checks.
Using e.target instead of e.currentTarget.
Forgetting to specify the element type (for example, HTMLInputElement) - you will have to manually cast target's type.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.