Redux Form数字输入异常问题咨询：特殊字符输入未被识别

我之前在使用Redux Form 7.2.1的字段级验证示例时，也碰到过一模一样的问题！这其实是Redux Form默认处理number类型字段的机制导致的：它会自动将无法被解析为有效合法数字的输入清空为空字符串，而单独的+、-、e，或者不完整的数字格式（比如只输入e、+12还没输完），都会被判定为无效数字，所以输入会被清空，进而触发必填项的验证提示。

下面是几个亲测有效的解决办法：

1. 自定义输入组件，完全控制输入逻辑 #

把字段的type改成text，然后自己编写输入过滤逻辑，不让Redux Form的默认行为干涉输入内容：

// 自定义年龄输入组件
const AgeInput = ({ input, meta }) => {
  const handleChange = (e) => {
    // 只保留数字、+、-、e这些允许的字符
    const filteredValue = e.target.value.replace(/[^0-9+\-e]/g, '');
    // 把处理后的值传给Redux Form的onChange
    input.onChange(filteredValue);
  };

  return (
    <div>
      <input {...input} type="text" onChange={handleChange} />
      {meta.touched && meta.error && <span className="error">{meta.error}</span>}
    </div>
  );
};

// 在表单中使用这个组件
<Field name="age" component={AgeInput} validate={[required, validateAge]} />

这种方法的好处是完全掌控输入的每一步，Redux Form不会再自动清空你的输入，同时你还能过滤掉其他非法字符。

2. 自定义normalize方法，兼容中间输入状态 #

如果你不想自定义组件，可以重写normalize方法，让它允许那些处于输入过程中的合法中间值：

// 自定义normalize函数
const normalizeAgeInput = (value) => {
  // 允许空值，或者符合数字格式的输入（包括带+、-、e的不完整格式）
  if (!value || /^[+\-]?\d*(\.\d*)?([eE][+\-]?\d*)?$/.test(value)) {
    return value;
  }
  // 如果是非法内容，返回undefined（保留之前的有效值）
  return undefined;
};

// 在Field中配置normalize
<Field 
  name="age" 
  type="text" 
  component="input" 
  normalize={normalizeAgeInput} 
  validate={[required, validateAge]} 
/>

这里一定要把type改成text，否则浏览器自带的number输入框会先一步过滤掉e、+这些字符，根本传不到Redux Form里。

3. 调整验证逻辑，兼容临时输入状态 #

如果上面的方法还不够，你可以修改必填验证函数，让它不要把正在输入的合法临时值判定为空：

const required = (value) => {
  // 只有当值为空，或者是单个的+、-、e时，才提示必填
  if (!value || (value.length === 1 && /[+\-e]/.test(value))) {
    return '此字段为必填项';
  }
  return undefined;
};

不过这个方法最好配合前面的自定义输入或normalize一起使用，不然Redux Form还是会清空输入，验证逻辑也发挥不了作用。

内容的提问来源于stack exchange，提问作者Jan Swart