React Event + TypeScript

ReactSynthetic Eventの型についてぐぐってばかりいるのでメモを残しておきます。

Synthetic Event とは？

onChange={event => console.log(event)}のeventです。

SyntheticEvent – React

Synthetic Event の型

FormEvent

submit.tsx

import { FormEvent } from 'react';
...
const handleSubmit = (e: FormEvent) => {
...
<form onSubmit={handleSubmit}>
...
<button type="submit" onClick={handleSubmit}>Submit</button>
...

ChangeEvent

change.tsx

import { ChangeEvent } from 'react';
...
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
...
const handleSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
...
<input value={inputValue} onChange={handleInputChange} type="text" />
...
<select value={selectValue} onChange={handleSelectChange}>
...

KeyboardEvent

keyPress.tsx

import { KeyboardEvent } from 'react';
...
const handleKeyPress = (e: KeyboardEvent) => {
...
const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
...
<textarea
  onKeyPress={handleKeyPress}
  onChange={handleChange}
...

MouseEvent

<HTML...Element>なしでdatasetを参照しようとするとタイプエラーがでます。
<button></button>以外にonClickをつけることを想定するなら<HTMLElement>を使ってしまうと楽です。

click.tsx

import { MouseEvent } from 'react';
...
const handleClick = (
  e: MouseEvent<HTMLButtonElement>
) => {
 e.preventDefault();
 console.log(e.currentTarget.dataset.id);
}
...
<button data-id={someId} onClick={handleClick}>click</button>
...