【React】フォーカスアウトするとカンマ区切りで表示される入力欄 - Qiita

経緯 数値を入力する項目がある 桁が大きくなると額がわからなくなる だからカンマ区切りで表示したい それを実現可能な要素はHTMLには無い input=text だと数値以外を入力できる input=number だとカンマを表示できない じゃあ作ろう 仕様 input=textをベースとする 入力値は右寄せで表示する バリデーション機能を追加する 正の数、および負の数を入力可とする マイナスは先頭のみ入力可とする 小数点は一度のみ入力可とする 小数点の前には必ず数値の入力があるものとする 末尾が小数点で終わる場合を許容する 未入力、及びバリデーション通過時の背景色を #FFF とする バリデーション不通過時の背景色を #FFBEDA とする 入力欄にフォーカス時に入力した文字列をそのまま表示する 入力欄からフォーカスアウト時にバリデーションを通過した場合はカンマ区切りの文字列を表示する