React不会考虑带有0值的尾随小数[重复]答案

【问题标题】：React won't take into consideration trailing decimals with 0 values [duplicate]React不会考虑带有0值的尾随小数[重复]
【发布时间】：2021-10-02 15:43:09
【问题描述】：

我正在实施输入验证以禁止超过两位小数，但是当我尝试更新一个值时，React 认为它是相同的，因此它不会更新状态。

例如，值为 1.00000，这不适用于我的验证，因为 JavaScript 认为 1.0000 等于 1、1.0 或 1.00，所以当我调用将状态从 1.0000 更新为 1.00 时，什么都不会发生。我并不为此责怪 React，因为它可能正在执行 JavaScript 相等性检查并看到它是同一件事，因此没有更新 DOM。

无论如何我可以通过使用功能组件设置值的状态来强制将值从 1.000 更新到 1.00？谢谢

验证不起作用，用户可以添加所有这些尾随 0

验证工作正常，我不能输入另一个数字（除非它是 0）

【问题讨论】：

能否包含您的无效验证码？
您可以将变量设置为Math.floor(value * 100)/100，这基本上会去掉 2 之后的任何小数点。
输入值应该以字符串形式出现。 "1.0" 与 "1.000" 绝对不同，除非您将字符串转换为数字（但这不是反应）。我们需要查看您的代码。
这能回答你的问题吗？ Remove leading zeros from input type=number

标签： javascript reactjs

【解决方案1】：

在输入上设置step 属性：

<input type="number" step={0.01} ... />`

您还可以使用onChange 事件处理程序：

<input type="number" onChange={e => setValue(Number.parseFloat(e.target.value))} ... />`

如果这些不起作用，请尝试空的 useEffect 块。

useEffect(() => {}, [value /* or whatever it is called */])

第二种方式应该删除 0，因为它是从字符串转换而来的。

useEffect 块应该触发组件中的重新渲染，但这取决于状态的定义位置。

【讨论】：

是的，我正在使用自定义 onChange 事件处理程序，但问题是，当您键入额外的 0 时，这实际上不会更新值，因为就像我在问题中列出的那样，React 将其视为相同的值并且不会在 DOM 中更新它。
我知道 React 没有更新它，因为 1.0 == 1.00 但我认为它至少 step 属性可以工作。我正在使用 useEffect 块更新我的答案。

【解决方案2】：

console.log(((-0.32 * 100) / 100).toFixed(2));
console.log(((1000.3202 * 100) / 100).toFixed(2));
console.log(((-1.294 * 100) / 100).toFixed(2));
console.log(((1.0 * 100) / 100).toFixed(2));
console.log(((1.000 * 100) / 100).toFixed(2));

一种重复的帖子，但写出答案比搜索更快。

【讨论】：

我不认为他是想把它弄圆，而是想把它弄平。我想如果小数点是 1.327，他只想要前两个，所以它会是 1.32。不过我可能错了。
老实说它可以被删除。那就是如果我们希望它非常准确！ :P
是的，我已经铺好了地板，它正在工作，但问题是 React 不会从 1.0000 -> 1.00 更新 dom，因为它认为它是相同的数字。
我认为问题不在于舍入，而在于 React 状态。