Question

如何处理子React输入控件中的小数，以便您可以实际输入例如“0.01”成功（没有奇怪到最终用户的箭头导航等）？

情景：

让父组件处理包含小数属性的对象的状态。
子控件是输入控件，其值为{{this.props.whatever}。
来自客户端的输入是一个字符串，因此输入的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

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

this answer to "translating between cents and dollars in html input in React"中提供了解释和类似的示例摘要。

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

1 个答案: