メインコンテンツにスキップ

イベント処理

イベント処理に関する React ドキュメントでは、React 要素にイベントハンドラをアタッチする方法が示されています。これらのイベントハンドラの型を指定するには、次のように `SyntheticEvent<T>` 型を使用できます。

1import {useState} from 'react';2import * as React from 'react';3
4function MyComponent(): React.Node {5  const [state, setState] = useState({count: 0});
                                                
6
7  const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {8    // To access your button instance use `event.currentTarget`.9    event.currentTarget as HTMLButtonElement;10
11    setState(prevState => ({12      count: prevState.count + 1,13    }));14  };15
16  return (17    <div>18      <p>Count: {state.count}</p>19      <button onClick={handleClick}>Increment</button>20    </div>21  );22}
5:29-5:48: Cannot call hook [1] because React hooks can only be called within components or hooks. [react-rule-hook]

`SyntheticKeyboardEvent<T>`、`SyntheticMouseEvent<T>`、`SyntheticTouchEvent<T>` など、より具体的な合成イベントタイプもあります。`SyntheticEvent<T>` 型はすべて、単一の型引数（イベントハンドラが配置された HTML 要素の型）を取ります。

要素インスタンスの型を追加したくない場合は、型引数*なし*で `SyntheticEvent` を使用することもできます。例：`SyntheticEvent<>`。

**注意:** 上記の例のように、`HTMLButtonElement` のような要素インスタンスを取得するために、`event.currentTarget` の代わりに `event.target` を使用してしまうのはよくある間違いです。`event.currentTarget` を使用する必要がある理由は、イベント伝播により、`event.target` が間違った要素になる可能性があるためです。

**注意:** React は独自のイベントシステムを使用しているため、`Event`、`KeyboardEvent`、`MouseEvent` などの DOM 型ではなく、`SyntheticEvent` 型を使用することが重要です。

React が提供する `SyntheticEvent<T>` 型と、それらが関連する DOM イベントは以下のとおりです。