React输入框使用toLocaleString处理货币小数的功能异常求助

嘿，我来帮你搞定这个React输入框的货币格式化问题！你当前的代码能正确处理整数的千分位，但没法支持小数输入，核心原因是原逻辑没有考虑小数部分的输入状态，而且直接用Number(value).toLocaleString()会在输入过程中丢失小数点这类临时状态。下面是调整后的完整解决方案：

function Input() { 
  const [value, setValue] = React.useState(""); 

  // 处理输入值，兼顾千分位格式化和最多两位小数限制
  const formatValue = (inputValue) => {
    // 第一步：清理输入，只保留数字和单个小数点
    const cleanedInput = inputValue.replace(/[^0-9.]/g, "");
    // 处理多个小数点的情况，只保留第一个
    const [integerPart, ...rest] = cleanedInput.split(".");
    const decimalPart = rest.length > 0 ? rest.join("").slice(0, 2) : "";

    // 给整数部分添加千分位逗号
    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    // 拼接最终显示值，保留用户输入小数点的临时状态
    let formattedValue = formattedInteger;
    if (decimalPart) {
      formattedValue += `.${decimalPart}`;
    } else if (cleanedInput.endsWith(".")) {
      // 如果用户刚输入小数点，保留这个状态方便后续输入小数
      formattedValue += ".";
    }

    setValue(formattedValue);
  };

  return ( 
    <input 
      type="text" 
      value={value} 
      onChange={(e) => formatValue(e.target.value)} 
      placeholder="请输入金额"
    /> 
  ); 
}

关键逻辑说明： #

• 输入清理：先把所有非数字、非小数点的字符过滤掉，避免无效输入干扰格式化。
• 小数位限制：最多保留两位小数，哪怕用户输入更多也会自动截取前两位。
• 千分位处理：用正则表达式/\B(?=(\d{3})+(?!\d))/g给整数部分从右往左每三位加一个逗号，符合货币展示习惯。
• 保留输入状态：比如用户输入2000.时，会保留小数点，不会直接转成2,000，让用户可以继续输入小数部分。

测试一下这个组件就能看到效果：

• 输入2000000 → 显示2,000,000
• 输入2000.5 → 显示2,000.5
• 输入2000.567 → 自动变成2,000.56
• 输入2000. → 保留2,000.，方便后续输入小数

这样就完全满足你的需求啦，既支持千分位展示，又能正确处理小数输入，还限制了最多两位小数。

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