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に型を付ける際に参考になりました。
まとめ
今回は、Reactでinputの入力値を取得する際の方法を掲載しました!
TypeScriptで書いていると、ついついanyを指定してやり過ごしてしまうこともありますが、独自で定義したり、既存に定義されているものを活用するなどして、しっかりと型定義もやっていきたいですね!
コメント