如何處理子React輸入控件中的小數點,以便實際輸入「0.01」成功(沒有奇怪的終端用戶箭頭導航等)?如何在React的onChange事件中處理輸入的十進制值?
方案:
,對於含有小數屬性的對象句柄狀態- 有無父組件。
- 兒童控制是與值= {this.props.whatever}輸入控制。從客戶端
- 輸入是一個字符串,所以輸入的的onChange/handleChange方法必須this.props.onChange(值)之前的輸入轉換爲十進制。
例如:
handleChange: function(event) {
var value = event.target.value;
this.props.onChange(toDecimalOrWhateverFunction(value));
},
...
問題:
工作正常整數,但一旦你開始進入小數,事情橫着走 「」和「0」條目,因爲十進制轉換會刪除任何小數點和零,然後才能添加任何以下數字(請記住,onChange會對每個按鍵都起作用),並且輸入的值設置爲該數字的字符串表示形式(不包括「。」或「0」),因爲值= {this.props.whatever}的
所以,用「123」或「1.14」,因爲該字符串結束分別爲123和1.14沒有問題。但不能做「0.01」或「1.01」,因爲在小數點前可以分別保持0和1。
我在處理小數在React JS 錯誤或者是否有處理這種情況的最佳做法?
更新: 重複的答案不一定是一個獨特的重複,因爲在我所有的搜索解決我的困惑,我沒有找到它。但是,其解決方案適用於我的方案,也可以適用於實際數據與用戶查看/輸入的數據類型或格式不匹配的其他方案。根據@WiredPrairie,「你需要存儲字符串輸入和一個十進制表示,字符串將存儲用戶輸入的確切文本,而另一個表示十進制值」。
如何實現你的'toDecimalOrWhateverFunction'也可以提供最低工作的例子嗎? – 2015-03-19 11:04:43
您需要存儲字符串輸入和十進制表示。該字符串將存儲用戶輸入的確切文本,另一個表示十進制值。 – WiredPrairie 2015-03-19 12:43:36
@limelights可以像parseFloat(value)一樣簡單。 – Ted 2015-03-20 19:02:35