使用Ant Design InputNumber实现原生number输入框行为问题求助

问题根源 #

你当前的parserNumber函数有两个核心问题：

• 正则/\$\s?|(\.*)/g会删掉所有点号，虽然后续把逗号转成了点，但toFixed(2)返回的是字符串类型，InputNumber组件处理字符串值时容易出现截断逻辑；
• 空值直接返回0的逻辑，会让用户输入未完成的内容（比如3,）被强制重置，体验糟糕。

修正后的实现代码 #

export const parserNumber = (val) => {
  if (!val) return null; // 空值返回null，保留输入框空白状态，不强制设为0
  
  // 1. 把逗号统一替换成小数点
  // 2. 过滤掉所有字母、特殊符号（只留数字和小数点）
  // 3. 只保留第一个小数点，去掉后续重复的
  const processedVal = val.replace(/,/g, '.')
                          .replace(/[^0-9.]/g, '')
                          .replace(/(\.)(?=.*\.)/g, '');

  // 处理输入到一半的状态，比如只输入了"."或者空的情况
  if (!processedVal || processedVal === '.') {
    return processedVal;
  }

  // 转成数值并保留两位小数，返回数值类型适配组件
  return Number(parseFloat(processedVal).toFixed(2));
};

组件使用时建议加上precision属性确保显示格式一致：

<InputNumber
  parser={(value) => parserNumber(value)}
  precision={2}
/>

核心优化说明 #

• 严格过滤无效输入：直接移除字母、非数字符号，满足"不允许输入字母"的要求；
• 逗号转小数点兼容：先统一格式再处理，避免解析混乱；
• 保留输入过程状态：用户输入3,或.这类未完成内容时，不会被强制重置为0；
• 返回数值类型：适配InputNumber组件的预期，避免字符串值导致的截断问题。

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