如何在React的onChange事件中处理十进制值以进行输入？

Question

如何处理子React输入控件中的小数,以便您可以成功输入例如"0.01"(没有奇数到最终用户的箭头导航等)？

场景:

1. 具有处理包含decimal属性的对象的状态的父组件.
2. 子控件是输入控件,其值为{{this.props.whatever}.
3. 来自客户端的输入是一个字符串,因此输入的onChange/handleChange方法必须在this.props.onChange(value)之前将输入转换为小数.

例如:

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

如果您正在使用派生值或需要支持将无效值一般输入到受控输入中,则需要一些状态来将用户的文字输入与派生/验证值分开存储.

此答案中提供了一个解释和类似的示例代码段,"在React中的html输入中转换美分和美元".