如何在React的onChange事件中處理輸入的十進制值？

Question

如何處理子React輸入控件中的小數點，以便實際輸入「0.01」成功（沒有奇怪的終端用戶箭頭導航等）？

方案：

，對於含有小數屬性的對象句柄狀態

1. 有無父組件。
2. 兒童控制是與值= {this.props.whatever}輸入控制。從客戶端
3. 輸入是一個字符串，所以輸入的的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，「你需要存儲字符串輸入和一個十進制表示，字符串將存儲用戶輸入的確切文本，而另一個表示十進制值」。

Answer 1

如果你使用派生值工作或需要支持一般無效值進入一個控制輸入，你需要一些狀態從派生/驗證值分別存儲了用戶的文字輸入。

的說明和一個類似的例子片斷在this answer to "translating between cents and dollars in html input in React"可用。