Reactでコンポーネントのプロパティーにイベントを渡すときの型を整理

Reactで定義されているイベントの型がわからずエラーメッセージを見ながら調整していくことになるので型を整理
サンプルコードはmaterial-uiで定義されているコンポーネントを呼び出すと仮定しています。

onChange

テキストフィールドなどのフォームで値の入力値を検知してアクションを実行する時に出てくる

(event: React.ChangeEvent<{}>) => void;

interface Props {
  changeTextFieldHandler: (event: React.ChangeEvent<{}>) => void;
}

<TextField
  onChange={changeTextFieldHandler}
/>

onSubmit

formのサブミット

(event: React.FormEvent) => void;

interface Props {
  formSubmitAction: (event: React.FormEvent<HTMLFormElement>) => void;
}

<form onSubmit={formSubmitAction}>

onMouseEnter / onMouseLeave

コンポーネントにマウスオーバーした時、マウスオーバーを解除したときのアクション

React.MouseEventHandler;

interface Props {
  onMouseEnterAction: React.MouseEventHandler<HTMLButtonElement>;
  onMouseLeaveAction: React.MouseEventHandler<HTMLButtonElement>;
}

<Button
  onMouseEnter={onMouseEnterAction}
  onMouseLeave={onMouseLeaveAction}
/>

onClick

クリックイベント

(event: React.MouseEvent) => void;

interface Props {
  onClickHandler: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

<Button onClick={onClickHandler}/>