这个问题在这里已有答案:
如何处理子React输入控件中的小数,以便您可以实际输入例如“0.01”成功(没有奇怪到最终用户的箭头导航等)?
场景:
-
具有处理包含decimal属性的对象的状态的父组件 .
-
子控件是输入控件,其值为{ .
-
来自客户端的输入是一个字符串,因此输入的onChange / handleChange方法必须在this.props.onChange(value)之前将输入转换为小数 .
例如:
handleChange: function(event) {
var value = event.target.value;
this.props.onChange(toDecimalOrWhateverFunction(value));
},
...
问题:
适用于整数,但是一旦你开始输入小数,事情就会以“ . ”的方式进行 . 和“0”条目,因为十进制转换删除任何小数点和零之后,您可以添加任何后续数字(记住,onChange作用于每个击键),输入的值设置为该数字的字符串表示(没有“ . ”或“0”)因为值=
因此,“123”或“1.14”没有问题,因为该字符串最终分别为123和1.14 . 但是不能做“0.01”或“1.01”因为在完成小数之前分别向0和1点火 .
我在React JS中处理小数错误还是处理这种情况的最佳做法?
更新:重复的答案不一定是一个明显的重复,因为在我寻求解决我的困境时,我没有找到它 . 但是,它的解决方案适用于我的场景,也可以适用于实际数据与用户可能查看/输入的数据类型或格式不匹配的其他场景 . 根据@WiredPrairie,“你需要存储字符串输入和十进制表示 . 字符串将存储用户键入的确切文本,另一个表示十进制值” .
1 回答
如果您正在使用派生值或需要支持将无效值一般输入到受控输入中,则需要一些状态来将用户的文字输入与派生/验证值分开存储 .
this answer to "translating between cents and dollars in html input in React"中提供了解释和类似示例代码段 .