React Hooks实现输入框输入小数时将点替换为逗号的问题求助

问题原因 #

• formatDecimal的入参声明为数字类型，但实际传入的是输入框返回的字符串值。当用户输入单独的.时，Number('.')会被转为0，格式化后输出0，自然看不到预期的逗号。
• toLocaleString('de-DE')仅能对合法的完整数字做格式化，输入中途的临时内容（比如12.）无法被正确识别：Number('12.')会被转为12，格式化后直接丢失小数点，根本没有替换成逗号的机会。
• 缺少非法输入过滤逻辑，非数字内容输入时会触发更多转换异常。

修复方案 #

实时输入场景下直接做字符串替换即可，不要在输入中途调用数字格式化方法处理不完整的内容，如果需要完整的德国数字格式，可以在输入框失焦后再做统一格式化：

const onChange = useCallback(
  event => {
    const { value } = event.target;
    // 替换小数点为逗号，同时过滤非数字、非逗号的非法内容
    const newValue = value.replace(/\./g, ',').replace(/[^0-9,]/g, '');
    setFieldValue(name, newValue);
  },
  [setFieldValue, name],
);

// 可选：失焦时做完整格式化
const onBlur = useCallback(() => {
  const currentValue = getFieldValue(name);
  // 把逗号转回小数点做数字转换，再格式化输出带逗号的格式
  const numericValue = Number(currentValue.replace(/,/g, '.'));
  if (!isNaN(numericValue)) {
    setFieldValue(name, numericValue.toLocaleString('de-DE'));
  }
}, [getFieldValue, setFieldValue, name]);

这样既可以保证输入时小数点实时替换为逗号，也能在输入完成后得到符合de-DE规范的数字格式。

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris