首页 文章

如何在React的onChange事件中处理十进制值以进行输入? [重复]

提问于
浏览
4

这个问题在这里已有答案:

如何处理子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 回答

相关问题