React数字输入框超出范围问题：输入4位以上数字自动清空

你遇到的「out of range」错误和输入清空问题，根源在于**type="number" 的输入框只接受纯数字内容**，而印尼盾格式化后的字符串包含千分位分隔符（比如 10.000），浏览器无法将带分隔符的字符串解析为有效数字，因此触发报错；当输入位数超过4位后，格式化结果出现分隔符，输入框无法识别就会自动清空。

把输入框类型改为 text，同时在输入处理逻辑中过滤非数字字符，确保状态中存储的是纯数字，显示时再进行印尼盾格式化：

修改后的代码 #

/* 格式化印尼盾 */
function formatNumber(amount) {
  if (!amount) return '';
  return new Intl.NumberFormat('id-id').format(amount);
}

const [lendData, setLendData] = useState({
  lendValue: 0,
  lendFee: 0,
});

function handleSubmit(e) {
  e.preventDefault();
}

function handleChange(e) {
  let { name, value } = e.target;
  // 过滤所有非数字字符，只保留纯数字
  const cleanValue = value.replace(/[^0-9]/g, '');
  // 转换为数字，空输入时设为0
  const numericAmount = cleanValue ? parseInt(cleanValue, 10) : 0;
  
  setLendData((prev) => ({
    ...prev,
    [name]: numericAmount,
  }));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<input
  type='text'
  name='lendValue'
  id='lendValue'
  placeholder='0'
  value={formatNumber(lendData.lendValue)}
  onChange={handleChange}
/>

逻辑说明 #

1. 输入框类型切换：text 类型支持显示带分隔符的格式化字符串，不会因为非数字内容触发解析错误。
2. 输入内容过滤：在 handleChange 中用正则过滤掉所有非数字字符，确保存入状态的是纯数字，避免后续格式化出错。
3. 格式化兼容空值：修改 formatNumber 函数，处理输入为空的情况，避免显示异常内容。

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