用 Redux Form 处理数字输入会做一些奇怪的事情答案

【问题标题】：Handling number input with Redux Form does strange things用 Redux Form 处理数字输入会做一些奇怪的事情
【发布时间】：2020-06-11 11:00:18
【问题描述】：

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

您可以输入数字、+、- 和 e。如下：

但 Redux Form 似乎无法识别这些输入。如果您尝试使用 parse 或 normalize 生命周期方法，则该值以 '' 的形式出现。

与屏幕截图中一样，验证表明该字段是必填的，就好像它是空的一样。

有没有办法处理这些？

【问题讨论】：

我发现消除这种情况的唯一方法是在输入字段上添加一个 keyDown 侦听器。不过感觉不是那么干净。

标签： html reactjs redux redux-form

【解决方案1】：

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

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

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

附：不要忘记，根据文档，您应该从 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

【讨论】：

这没什么区别。我尝试在 parse 和 normalize 生命周期挂钩上使用正则表达式进行解析/过滤，但除非输入字段具有初始值，否则您可以在数字字段中输入 e、+ 和 -。好像 redux 表单无法识别这些输入。
你可以在codesandbox.io/s/x7n01yvj5z找到一个例子注意：我已经将类型从数字更改为字符串，因为normalize自己处理输入
我想使用数字输入向用户显示移动设备上的数字小键盘 - 使用输入类型文本时会丢失。我什至考虑过根据移动设备和桌面设备呈现不同的组件（数字和文本）。我更关心为什么 Redux Form 允许在第一个字符上这样做？好像它没有发现按下了一个键。
input type="number" 允许它，而不是 Redux 表单。如果你没有指定任何额外的解析/规范化函数 Redux Form 只处理原始更改。因此，由于数字输入允许这种语法，因此 redux 形式也将允许它
是的，我明白了，但问题是即使将解析/规范化函数作为第一个字符输入，也不会调用它。之后，您可以输入数字、e、+ 和 - 的任意组合，而无需触发这些生命周期挂钩。检查我原来的问题。它甚至认为这个字段是空的，好像里面没有值一样。

【解决方案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" 需要接受所有输入值，但会强制浏览器触发数字键盘。从validate 中移除number 验证，最后使用redux-from 的normalize api 来操作输入值。

【讨论】：