React Number Format默认值覆盖：输入首数字替换0而非追加

受控组件+内置回调实现（接近原生配置的方案） #

react-number-format 没有直接的原生 props 实现「输入第一个数字替换默认0」的逻辑，但可以通过受控组件结合onValueChange回调快速实现需求：

import NumberFormat from 'react-number-format';
import { useState } from 'react';

function PriceInput() {
  const [inputValue, setInputValue] = useState('0');

  const handleValueChange = (values) => {
    const { rawValue, formattedValue } = values;
    // 空值时重置为0；初始值为0且输入单个数字时直接替换
    if (rawValue === '') {
      setInputValue('0');
    } else if (inputValue === '0' && rawValue.length === 1) {
      setInputValue(rawValue);
    } else {
      setInputValue(formattedValue);
    }
  };

  return (
    <NumberFormat
      value={inputValue}
      onValueChange={handleValueChange}
      decimalScale={2}
      fixedDecimalScale={true}
      allowEmptyFormatting={false}
    />
  );
}

极简自定义逻辑 #

如果不需要复杂的格式化拦截，也可以用更直接的方式处理：

const handleValueChange = (values) => {
  const { rawValue } = values;
  // 空值设为0，非空直接用原始输入值（自动替换初始的0）
  setInputValue(rawValue || '0');
};

这种方式下，用户输入第一个数字时会直接覆盖初始的0，删除所有内容后输入框自动回到0。

注意事项 #

• 如果开启fixedDecimalScale，初始值会显示为0.00，此时需要把判断条件改为inputValue === '0.00'。
• 必须用受控模式（通过value和onValueChange绑定状态），非受控模式下无法拦截默认的追加输入行为。

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