使用Redux Form处理数字输入确实很奇怪

Question

以https://redux-form.com/7.2.1/examples/fieldlevelvalidation/上的年龄字段为例。

您可以输入数字，+， - 和e。如下所示：

但它看起来并不像Redux Form那样认可那些输入。如果您尝试使用解析或规范化生命周期方法，则值将通过＆＃39;＆＃39;。

同样在屏幕截图中，验证表明该字段是必需的，就像它是空的一样。

有办法处理这些吗？

Answer 1

处理它的简单方法是使用parse：

<Field
    name="age"
    type="number"
    component={renderField}
    label="Age"
    validate={[required, number, minValue18]}
    warn={tooOld}
    parse={(val) => parseInt(val, 10)}
  />

但是parse函数应该比这个例子更聪明=）

P.S。不要忘记，根据文档，您应该从parse（https://redux-form.com/7.2.1/docs/api/field.md/#-code-format-value-name-gt-formattedvalue-code-optional-）返回新值

<强> UPD
使用type='string'和normalize LC的示例。 - https://codesandbox.io/s/x7n01yvj5z

Answer 2

这就是我解决这个问题的方式，

<Field
    name="age"
    type="text"
    pattern="[0-9]*"
    inputMode="numeric"
    component={renderField}
    label="Age"
    validate={[required]}
    warn={tooOld}
    normalize={ val => (val || "").replace(/[^\d]/g, "") }
/>

因此，基本上type="text"，pattern="[0-9]*"和inputMode="numeric"必须接受所有输入值，但仍会迫使浏览器触发数字小键盘。从number中删除validate验证，最后使用redux-from的normalize api来操纵输入值。