【React × TypeScript】inputの入力値を取得したい時

inputの入力値を取得したい時

TypeScriptでReactを書いていてinputの入力値を取得したい時がありますが、

• どうやってonChangeのイベントから値を取得するんだっけ？
• TypeScriptの型はどうするんだっけ？

ということがありましたので、備忘録として残しておきたいと思います。

inputの入力値を取得する

取得方法

まずonChangeイベントを使用します。

値を取得する際は、event.target.valueのようにして値を取得します。

eventの型は、React.ChangeEvent<HTMLInputElement>のようにして指定することができます。

ソースコード

こちらがソースコードになります。

取得した値は、ここでは数値であったためNumberでキャストしています。

<Input placeholder="0" onChange={
  (event: React.ChangeEvent<HTMLInputElement>) => {
    const value:number = Number(event.target.value);
    console.log(value);
  }
} />

型をつける参考

こちらのサイトがReactのEventに型を付ける際に参考になりました。

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

React x TypeScript の鬼門のひとつに「props に記述する EventCallback の適切な書き方が分からない」というものがあります。さて、このコンポーネントの type Props どう型定義するべきでしょう...

qiita.com

まとめ

今回は、Reactでinputの入力値を取得する際の方法を掲載しました！

TypeScriptで書いていると、ついついanyを指定してやり過ごしてしまうこともありますが、独自で定義したり、既存に定義されているものを活用するなどして、しっかりと型定義もやっていきたいですね！