NumberInput

一个支持千分位货币格式的 React 数字输入框组件。

特性

• ✅ 支持千分位货币格式格式化
• ✅ 可选的格式化功能（通过 props 控制）
• ✅ 支持小数点和负数
• ✅ 支持最小值和最大值限制
• ✅ TypeScript 支持
• ✅ 完全可自定义样式

安装

npm install @your-username/number-input

或使用 yarn:

yarn add @your-username/number-input

使用方法

基础用法

import NumberInput from '@your-username/number-input';

function App() {
  const [value, setValue] = useState<number | null>(null);

  return (
    <NumberInput
      value={value}
      onChange={setValue}
      placeholder="请输入数字"
    />
  );
}

启用千分位格式

import NumberInput from '@your-username/number-input';

function App() {
  const [value, setValue] = useState<number | null>(null);

  return (
    <NumberInput
      value={value}
      onChange={setValue}
      formatCurrency={true}
      placeholder="请输入金额"
    />
  );
}

API

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | number \| string \| null | - | 输入框的值 | | onChange | (value: number \| null) => void | - | 值变化时的回调函数 | | formatCurrency | boolean | false | 是否开启千分位货币格式 | | placeholder | string | '请输入数字' | 输入框占位符 | | className | string | '' | 自定义 CSS 类名 | | disabled | boolean | false | 是否禁用 | | min | number | - | 最小值限制 | | max | number | - | 最大值限制 | | onBlur | (e: FocusEvent<HTMLInputElement>) => void | - | 失去焦点时的回调 |

示例

带范围限制的输入框

<NumberInput
  value={value}
  onChange={setValue}
  min={0}
  max={1000000}
  formatCurrency={true}
/>

自定义样式

<NumberInput
  value={value}
  onChange={setValue}
  className="custom-input-class"
  formatCurrency={true}
/>

工作原理

• 普通模式 (formatCurrency={false}): 输入数字后直接显示，不进行格式化
• 千分位模式 (formatCurrency={true}):
  • 输入时显示纯数字以便编辑
  • 失去焦点时自动格式化为千分位格式（如：1,234.56）
  • 获得焦点时自动转换为纯数字以便编辑

开发

# 构建包
npm run build:package

# 开发 Next.js 应用
npm run dev

License

MIT