React+TypeScriptでonClickに適切なイベント型を指定する方法

この記事は公開から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/reactonClickイベントの定義内容:
file

@types/reactMouseEventHandlerの型定義内容:
file

サンプルソースコード(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>
    </>
  )
}


以上です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする