React & TypeScript環境でformを作ったらイベントの型指定にちょいハマりした話

React + TypeScriptで

フォーム – React

を参考にFormを実装していたら、イベントの型指定にちょいハマりしたのでメモ。 これ前やった気がするんだけど思い出せなんだ。。。

はまった箇所

handleChangeの引数: eventの型

const Test: React.FC = () => {
  ...

  const handleSubmit = () => {
    ...
  }

  const handleChange = (event: ★★ココ★★) => {
    ...
  }

  return (
    ...
    <form onSubmit={handleSubmit}>
      <input type="text" value={...} onChange={handleChange}/>
      <input type="submit" value={buttonValue}/>
    </form>
    ...
  )
}

結論

ChangeEventを指定する。

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    ...
  }

参考サイト

React.Hooks で 大量の input 更新ハンドラーをまとめる小技 - Qiita

( React + TypeScript)event.target.nameとevent.target.valueの型付け - わいの日記

React Event + TypeScript - Qiita

any型で諦めない React.EventCallback - Qiita

備考

正直理由は今ひとつ理解していない。 理由なんて無くてただそう決まっているだけという話もあるかもしれないけど、 それにしたって文脈とか体系立った理解とかしたいんだけど。。。

TypeScriptは本当に適当運用なので、もうちょいまともに学ばないとなぁ。