Reactのイベント型について

前提知識#

• React におけるイベントはブラウザのネイティブイベントではなく、クロスブラウザ対応などを行ったラッパである。
• これを合成イベント（Synthetic Event）と呼ぶ。
• ネイティブイベントには、event.nativeEvent からアクセスできる。

React.XXXEventHandler#

button 要素の onClick の型定義。

1
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {};
2

3
<button onClick={handleClick}>Some Component</button>;

これは次と同じ。

1
const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {};
2

3
<button onClick={handleClick}>Some Component</button>;

React.FC と同様の理由で、React.XXXEventHandler 系を使うのは推奨しない。

React.XXXEvent#

Event 用の型のいくつかは 2 つ目のジェネリクスを持つが、適切な初期値が与えられているため基本的に指定する必要はない。

1
React.MouseEvent<HTMLElement, NativeEvent>;
2
React.DragEvent<HTMLElement>;

• HTMLElement の型は、event.currentTarget で使われる。
  • currentTarget を使わないなら不要
• NativeEvent の型は、event.nativeEvent で使われる。
  • nativeEvent をカスタマイズして利用しないのであれば不要

1
const handleClick = (event: React.MouseEvent) => {
2
  window.alert("Hello, World");
3
};
4

5
<button onClick={handleClick}>Some Component</button>;

React.SyntheticEvent#

React のイベントは合成イベントであり、型においても SyntheticEvent を継承している。

何のイベントによって呼び出されたのかを気にしない OR したくないのであれば有益。

1
const handler = (event: React.SyntheticEvent<HTMLInputElement>) => {
2
  console.log(event.type, event.currentTarget.value);
3
};
4

5
export const SomeComponent = () => {
6
  return (
7
    <input onChange={handler} onFocus={handler} onKeyDown={handler}>
8
      Some Component
9
    </input>
10
  );
11
};

Event は必ず React から import すること#

React.MouseEvent と MouseEvent が存在する。

React から提供されない Event は、NativeEvent であるため正しく型が付かない。

まとめ#

React.MouseEventHandler<HTMLButtonElement>などハンドラー系の型は取り回しが悪いのでおすすめはしない。

MouseEventとReact.MouseEventは別物であり、MouseEvent は NativeEvent であるため正しく型が付かない。React から提供されている Event を利用すること。

React から import されていない Native の Event 型は利用しない。React から提供されている React.MouseEvent や React.ChangeEvent などを利用する。

React.XXXEventHandler も取り回しが悪いためおすすめはしない。

また、event.currentTarget を利用しないのであれば、基本的にジェネリクスは指定しなくても問題はない。

イベントの種類を問わないなら、React.SyntheticEvent が使える。