Posted inReact プログラミング

[React / Next.js / Error] TypeScriptのonChangeの型設定

[React / Next.js / Error] TypeScriptのonChangeの型設定

概要

  • useStateを利用してフォームの変更を反映する処理を追加したら画面でエラーが発生しました。
  • textのonChange関数の定義でエラーが発生したので対応の手順をまとめました。

開発環境

  • React 19.0.0-rc-69d4b800-20241021
  • Next.js 15.0.1

エラー内容

  • 次のソースのようにフォームのtextの内容を下のpタグに表示するだけのページです。
  • textの変更を反映させるためにonChange関数を定義しましたが、
    その引数eが型のエラーが発生しました。
  • ソースとエラー内容は次の通りです。
page.tsx
"use client"

import { useState } from 'react'

export default function Test() {
  // テスト用string
  const [test, setTest] = useState("test")

  // 入力変更を反映させる
  const handleInputForm = e => {
    setTest(e.target.value)
  }

  // textとpのみの簡単なフォーム
  return (
   <form>
    <input id="test" name="test" type="text" onChange={handleInputForm} value={test}/>
    <p>{test}</p>
   </form>
  );
}
Error
Parameter 'e' implicitly has an 'any' type.

参考

対応

React.ChangeEvent<HTMLInputElement>型に対応

  1. eを()で囲み、型はReact.ChangeEvent<HTMLInputElement>で定義します。
page.tsx
"use client"

import { useState } from 'react'

export default function Test() {
  // テスト用string
  const [test, setTest] = useState("test")

  // 入力変更を反映させる
  // 1. eを()で囲み、型はReact.ChangeEvent<HTMLInputElement>で定義します。
  const handleInputForm = (e :React.ChangeEvent<HTMLInputElement>) => {
    setTest(e.target.value)
  }

  // textとpのみの簡単なフォーム
  return (
   <form>
    <input id="test" name="test" type="text" onChange={handleInputForm} value={test}/>
    <p>{test}</p>
   </form>
  );
}
  • これでエラーなくフォームが正常に動作するようになりました。
Tags: