如何在redux-form的number类型输入框中禁止输入'e'

我来帮你搞定这个问题～ 原生的type="number"输入框默认允许输入'e'（因为它属于科学计数法的合法字符），这就导致了你遇到的UI显示'e'但redux状态为空的情况。下面给你两种靠谱的解决思路：

方法一：改用text类型输入框，完全控制输入内容 #

这种方法最稳妥，直接绕过原生number输入框的默认行为，自己处理输入过滤和范围校验。修改你的自定义NumberField组件如下：

const NumberField = ({ input, label, width, meta: { touched, error } }) => {
  const handleChange = (e) => {
    // 第一步：只保留0-9的数字，过滤所有非数字字符
    const rawValue = e.target.value.replace(/[^0-9]/g, '');
    
    // 第二步：处理1-100的取值范围
    let finalValue = rawValue;
    const numValue = parseInt(rawValue, 10);
    if (numValue > 100) {
      finalValue = '100';
    } else if (numValue < 1 && rawValue !== '') {
      // 空值保留，让required校验处理
      finalValue = '1';
    }
    
    // 同步处理后的值到redux-form状态
    input.onChange(finalValue);
  };

  return (
    <div style={{ width }}>
      <label>{label}</label>
      <input
        {...input}
        type="text" // 替换成text类型
        onChange={handleChange}
        value={input.value || ''}
      />
      {/* 显示redux-form的校验错误 */}
      {touched && error && <span style={{ color: 'red', fontSize: '0.8rem' }}>{error}</span>}
    </div>
  );
};

同时别忘了在redux-form的校验规则里补充范围校验：

const validateForm = values => {
  const errors = {};
  if (!values.weight) {
    errors.weight = 'Weight is required';
  } else if (parseInt(values.weight, 10) < 1 || parseInt(values.weight, 10) > 100) {
    errors.weight = 'Must be between 1 and 100';
  }
  return errors;
};

方法二：保留number类型，拦截非法按键+过滤输入 #

如果你坚持要用type="number"，可以通过监听按键事件阻止'e'、'+'、'-'等非法输入，再配合onChange过滤粘贴的非法内容：

const NumberField = ({ input, label, width, meta: { touched, error } }) => {
  const handleKeyDown = (e) => {
    // 阻止e、E、+、-这些按键
    const forbiddenKeys = ['e', 'E', '+', '-'];
    if (forbiddenKeys.includes(e.key)) {
      e.preventDefault();
    }
  };

  const handleChange = (e) => {
    let value = e.target.value;
    // 过滤掉可能通过粘贴进来的非法字符
    value = value.replace(/[eE+-]/g, '');
    // 处理范围
    const numValue = parseInt(value, 10);
    if (numValue > 100) {
      value = '100';
    } else if (numValue < 1 && value !== '') {
      value = '1';
    }
    input.onChange(value);
  };

  return (
    <div style={{ width }}>
      <label>{label}</label>
      <input
        {...input}
        type="number"
        onKeyDown={handleKeyDown}
        onChange={handleChange}
        value={input.value || ''}
      />
      {touched && error && <span style={{ color: 'red', fontSize: '0.8rem' }}>{error}</span>}
    </div>
  );
};

总结 #

个人更推荐方法一，因为它完全避免了原生number输入框的各种坑（比如科学计数法、正负号等），而且能让UI显示和redux状态完全同步，不会出现显示'e'但状态为空的情况。

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