この記事は公開から1年以上経過しています。
React+TypeScript(+Chakra UI)でuseCallback経由でonClickイベントハンドラに渡されるオブジェクトの型についての備忘録。
問題
ButtonのonClickイベントハンドラに渡されるオブジェクトの型にEvent
を指定すると
Type ‘(event: Event) => void’ is not assignable to type ‘MouseEventHandler
‘
のようなエラーが発生してしまう。
また、上記エラーに従いMouseEventHandler<HTMLButtonElement>
を指定すると型エラーは発生しないが
Property ‘preventDefault’ does not exist on type ‘MouseEventHandler
‘
のようにpreventDefault()
などでエラーが発生してしまう。
対応
@types/react
の定義に従いonClick
イベントハンドラのオブジェクトの型にMouseEvent<HTMLButtonElement>
を指定する。
@types/react
のonClick
イベントの定義内容:
@types/react
のMouseEventHandler
の型定義内容:
サンプルソースコード(TSX)
import React, { MouseEvent, useCallback } from 'react'
import { Button } from '@chakra-ui/react'
export default function MyComponent() {
const buttonHandler = useCallback(
(event: MouseEvent<HTMLButtonElement>) => {
event.preventDefault() // ※必要な場合
// ボタン処理
}, [])
return (
<>
<Button onClick={buttonHandler}>Click Here</Button>
</>
)
}
以上です。