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

React

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

TypeScriptReactを書いていて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に型を付ける際に参考になりました。

まとめ

今回は、Reactinputの入力値を取得する際の方法を掲載しました!

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

オススメの関連商品

Note一覧

コメント

タイトルとURLをコピーしました