ReactJS中货币格式化输入无法输入小数点的问题排查与解决

问题背景 #

在React中实现货币格式输入（如1,456,567.545）时，启用自定义格式化函数后无法输入小数点，注释函数return语句时日志输出符合预期，需要修复该输入异常问题。

问题原因 #

1. 当用户首次输入小数点.时，cleanedValue为.，拆分后整数部分为空，小数部分也为空，最终函数返回空字符串，导致输入框被清空，无法继续输入小数点后内容。
2. 对于.123这类以小数点开头的半完成输入，原函数无法保留开头的小数点，不符合用户输入习惯。

修复方案 #

修改格式化函数，补充对纯小数点、开头小数点场景的处理逻辑：

export const formatCurrencyNumberWithDecimal = (value) => {
  if (!value) return value; // 空值直接返回

  const cleanedValue = value.replace(/,/g, ''); // 移除现有逗号
  // 处理仅输入小数点的情况
  if (cleanedValue === '.') {
    return '.';
  }

  const parts = cleanedValue.split('.');
  const integerPart = parts[0].replace(/\D/g, ''); 
  const decimalPart = parts[1] ? parts[1].replace(/\D/g, '').slice(0, 4) : '';

  let formattedValue = '';

  // 处理以小数点开头的输入（如".123"）
  if (!integerPart && decimalPart) {
    formattedValue = `.${decimalPart}`;
  } else {
    if (integerPart) {
      formattedValue = parseFloat(integerPart).toLocaleString('en-US');
    }
    if (decimalPart) {
      formattedValue += `.${decimalPart}`;
    }
  }

  return formattedValue;
}

关键优化点 #

• 新增空值判断，直接返回原空值，避免无效处理
• 单独处理纯小数点输入，保留用户输入状态
• 支持以小数点开头的输入，确保用户可以先输小数点再填数字
• 保留原有千分位格式化、小数位最多4位的限制逻辑

测试验证 #

• 输入.：输入框保留.
• 输入.123：显示.123
• 输入1234.5678：显示1,234.5678
• 输入1234567.89：显示1,234,567.89
• 输入非数字字符：自动过滤，仅保留有效数字和小数点

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