2023-01-06

Reactで小数点入力できない問題

みんなどうしているのか?いまいちベストプラクティスが見つからない。

例えば、テキストボックスに"1.1"を入力しようとして、"1."まで入力したとする。

数値に変換してstateを保存しようとすると、変換の際に末尾の小数点がそぎ落とされて、表示されるのは"1"になってしまう。

レンダリングが早いので、ユーザーからすると、小数点入力が受け付けられていないように感じる。

仕組みが分っていれば、"11"を入力してから間に小数点を挿入すれば入力可能だが、ユーザーにそれを求めるわけにもいかない。

  • 状態は文字列で保持して、数値として使う前に数値に変換する

記事への反応(ブックマークコメント)

ログイン ユーザー登録
ようこそ ゲスト さん