【React x Typescript】input[type=”text”]タグで文字数を取得する方法

プログラミング

Reactで入力した文字数を取得する際の型定義を含む書き方になります。

結論

React.ChangeEventあたりはVSCodeの補完で表示される型をそのまま定義すれば大丈夫です。

import React, { useState } from "react";

export const example = () => {
  const [text, setText] = useState<string>();
  const [count, setCount] = useState<number>(0);
  const inputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };
  const countHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
    setCount(e.currentTarget.value.length);
  };
  return (
    <>
      <input
        type="text"
        onChange={(e) => {
          inputHandler(e);
        }}
        onKeyUp={(e) => {
          countHandler(e);
        }}
      />
      <p>{count}文字</p>
    </>
  );
};

countHandlerでe.currentTarget.valueとしている点が味噌になります。e.target.valueと記述すると次のようにpropertyが存在しませんといった注意文が表示されます。

Property 'value' does not exist on type 'EventTarget'.ts(2339)

まとめ

少し立ち止まって検索する時間は必要なのですが、こうした点も結構すらすら書けるようになってきたので良きかなと思っています。Reactは書いていて楽しいんですよね。

参考

Property ‘value’ does not exist on type ‘EventTarget’

ー　この記事をシェアする？　ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

Related / 関連記事