使用 React 最终表单进行自定义验证答案

【问题标题】：Custom Validation with React Final Form使用 React 最终表单进行自定义验证
【发布时间】：2018-02-12 09:18:16
【问题描述】：

我正在尝试在输入框中添加一些仅允许数字（数量）的自定义验证。根据here 上给出的示例，我尝试添加自定义验证。

const onlyAmount = value => {
  if (!value) return value
  let onlyNums = value.replace(/^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$/, '')
  return onlyNums
}

我的最终形式的字段就像

<Field
  name="price"
  component="input"
  type="text"
  parse={onlyAmount}
/>

没问题，它不允许我正确添加数字。我阅读了文档，但找不到任何帮助解决方案。

反应最终形式：https://github.com/final-form/react-final-form

任何建议都会很有帮助。

【问题讨论】：

标签： javascript reactjs react-final-form

【解决方案1】：

只添加 type="number"。键盘不允许除数字外。

【讨论】：

我知道输入类型“数字”，但我也需要防止使用代码。
在“onChange”函数中检查值是否为数字。如果是数字，则将其保存在状态或道具中

【解决方案2】：

type="hidden" 似乎是个错误。这不会导致<input type="hidden"/>吗？

我没有在心里解析你的正则表达式，但我建议你尝试在你链接到的那个沙箱中测试你的解析函数，看看它为什么不起作用。

【讨论】：

【解决方案3】：

这是你的正则表达式。如果你添加一个控制台来打印你的值，然后你的 onlyNum，你会得到空字符串。

【讨论】：