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

问题描述

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

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

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

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

解决方法

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

React Final Form 从第一天起就有 parseformat 道具,但根据我的经验,我建议不要使用它们。我的建议:保留表单值字符串,并在提交时将它们解析为 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 的所有库都支持以一种或另一种方式解析为数字。