如何在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"可用。