将数字作为初始值存储在 formik、react-final-form、react-hook-form 中

如何解决将数字作为初始值存储在 formik、react-final-form、react-hook-form 中

我想知道人们对这种情况的看法：您有一个表示商品价格的输入，例如为用户购买的商品填写表单。您有一些实用程序可以使数字具有一定的小数位数，而不是负数等。当然，输入本身的值需要是一个字符串，因为它最终是 html。两种选择都有哪些优点/缺点：

• 编写一些代码，接受数字类型的初始值，并将数字格式化为字符串表示形式，然后解析回数字表示形式，并且两者都处理可能从以美分为单位的价值转换为美元等。 或
• 将初始值格式化为字符串，然后处理字符串值，然后提交给 api，将其解析为 api 需要的值（在本例中以美分为单位）

我觉得这两种方法都需要权衡，但是将事物作为字符串总是更加解耦，这在提交、验证等地方带有一些额外的代码（例如，检查值是否大于 0，必须在验证之前转换为数字），但在表单级别保持简单。

另一方面，如果您的应用程序中的很多地方都有价格输入字段，那么将数字作为表单状态中的值进行维护可能更有意义，并且能够只提交将状态提交给 api 而不用担心它是正确的类型/值听起来不错且方便。

解决方法

归根结底，DOM 输入使用字符串。历史上，表单数据是作为查询参数提交的，记住。

React Final Form 从第一天起就有 parse 和 format 道具，但根据我的经验，我建议不要使用它们。我的建议：保留表单值字符串，并在提交时将它们解析为 Number（如果必须）。

,

默认输入返回字符串。您可以参考以下规范：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

然而，您可以使用 smb，但您需要小心使用 valueAsNumber。当解析失败时，它会回到那个状态。

NaN

double：返回元素的值，按顺序解释为以下之一：

• 时间价值
• 一个数字
• NaN，如果无法转换

这是 valueAsNumber 中的一个实现，您也可以像上面建议的 Erik（React Final Form 和 Redux Form 的作者）那样进行解析。

react-hook-form

您 ping 的所有库都支持以一种或另一种方式解析为数字。