问题描述
我想知道人们对这种情况的看法:您有一个表示商品价格的输入,例如为用户购买的商品填写表单。您有一些实用程序可以使数字具有一定的小数位数,而不是负数等。当然,输入本身的值需要是一个字符串,因为它最终是 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 的所有库都支持以一种或另一种方式解析为数字。