如何处理 React 的 onChange 事件中的小数值输入？

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 中处理小数是错误还是有处理这种情况的最佳实践？

更新：重复的答案不一定是明显的重复，因为在我为解决我的困境而进行的所有搜索中，我都没有找到它。但是，它的解决方案适用于我的场景，也适用于实际数据与用户可能 view/enter 的数据类型或格式不匹配的其他场景。根据@WiredPrairie，"You'll need to store the string input and a decimal representation. The string will store the exact text the user has typed, and the other represents the decimal value".

Answer 1

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

中提供了解释和类似的示例片段。

如何处理 React 的 onChange 事件中的小数值输入？

How to handle decimal values in React's onChange event for input?

javascript

reactjs