React实现number类型输入框输入时显示印尼盾货币格式

问题根源 #

<input type="number">的value属性仅接受纯数字（或空字符串），你绑定格式化后的Rp 0这类带符号的字符串时，浏览器无法解析为合法数字，因此抛出The specified value "Rp 0" cannot be parsed, or is out of range.错误。

可行解决方案 #

由于type="number"输入框本身不支持显示带符号的货币格式，推荐改用type="text"输入框，同时模拟数字输入的体验并实时格式化：

1. 修改输入框配置：使用text类型，添加inputMode="numeric"让移动端弹出数字键盘，pattern="[0-9]*"辅助浏览器识别数字输入规则。
2. 过滤输入内容：确保仅允许输入数字字符，内部始终存储纯数字值（方便后续业务逻辑）。
3. 实时格式化显示：将内部数字值格式化为印尼盾字符串绑定到输入框的value上。

完整代码示例 #

import { useState } from 'react';

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

  function handleSubmit(e) {
    e.preventDefault();
    // 提交时使用lendData.lendValue（纯数字）即可
    console.log('提交金额:', lendData.lendValue);
  }

  function handleChange(e) {
    // 过滤所有非数字字符
    const rawInput = e.target.value.replace(/[^0-9]/g, '');
    // 转换为数字，空输入时设为0
    const numericValue = rawInput ? parseInt(rawInput, 10) : 0;
    // 更新内部存储的纯数字值
    setLendData(prev => ({
      ...prev,
      lendValue: numericValue,
    }));
  }

  /* 印尼盾格式化函数 */
  function formatCurrency(amount) {
    return new Intl.NumberFormat('id-ID', {
      currency: 'IDR',
      style: 'currency',
      maximumFractionDigits: 0,
      minimumFractionDigits: 0,
    }).format(amount);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="lend-value"
        id="lend-value"
        placeholder="Rp 0"
        value={formatCurrency(lendData.lendValue)}
        onChange={handleChange}
        inputMode="numeric"
        pattern="[0-9]*"
      />
      <button type="submit">提交</button>
    </form>
  );
}

备选方案（坚持使用number输入框） #

如果必须保留type="number"，只能在输入框内显示纯数字，同时在旁边实时展示格式化后的印尼盾值：

// 保留原handleChange逻辑（存储纯数字）
return (
  <div>
    <input
      type="number"
      name="lend-value"
      id="lend-value"
      placeholder="0"
      value={lendData.lendValue}
      onChange={handleChange}
      min="0"
    />
    <span style={{ marginLeft: '8px' }}>{formatCurrency(lendData.lendValue)}</span>
  </div>
);

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