React Number Format 数字格式化库入门指南

React Number Format 数字格式化库入门指南

react-number-format React component to format numbers in an input or as a text. 项目地址: https://gitcode.com/gh_mirrors/re/react-number-format

什么是 React Number Format

React Number Format 是一个专为 React 应用设计的输入格式化库，它内置了精巧轻量的光标位置处理引擎。该库的主要功能是确保用户只能输入符合特定数字或字符串模式的文本，并自动格式化输入值以便显示。

核心特性解析

1. 基础数字格式化

• 前缀/后缀支持：可以轻松添加货币符号（如$、¥）或单位（如%、°C）
• 千位分隔符：自动添加逗号或点号分隔大数字（如1,000,000）
• 小数位控制：精确控制小数位数显示

2. 输入掩码功能

• 强制用户按照预定模式输入（如电话号码、信用卡号格式）
• 实时格式化显示，同时保持原始值不变

3. 多种使用方式

• 可作为受控/非受控输入组件使用
• 也可作为纯文本格式化工具（不依赖输入框）

4. 高度可定制化

• 支持自定义格式化模式
• 可覆盖默认的格式化处理逻辑
• 完全控制组件的外观和行为

安装方法

通过 npm 安装

npm install react-number-format --save

通过 yarn 安装

yarn add react-number-format

基本使用方式

数字格式化组件

import { NumericFormat } from 'react-number-format';

function PriceInput() {
  return (
    <NumericFormat 
      thousandSeparator=","
      prefix="$"
      decimalScale={2}
    />
  );
}

模式格式化组件

import { PatternFormat } from 'react-number-format';

function PhoneInput() {
  return (
    <PatternFormat 
      format="+1 (###) ###-####"
      mask="_"
    />
  );
}

使用场景示例

1. 货币输入

<NumericFormat
  value={price}
  thousandSeparator={true}
  prefix="$"
  onValueChange={(values) => {
    // values包含格式化值和原始值
    setPrice(values.floatValue);
  }}
/>

2. 百分比输入

<NumericFormat
  suffix="%"
  decimalScale={1}
  fixedDecimalScale
/>

3. 信用卡号格式化

<PatternFormat
  format="#### #### #### ####"
  mask="_"
/>

为什么选择这个库

1. 卓越的光标处理：在格式化过程中智能保持光标位置，提供流畅的输入体验
2. 轻量高效：不依赖大型库，保持包体积最小化
3. TypeScript支持：完整的类型定义，提高开发效率
4. 无障碍支持：遵循WAI-ARIA标准，确保可访问性

最佳实践建议

1. 对于简单数字格式化，优先使用NumericFormat
2. 需要复杂模式匹配时（如电话号码、身份证号），使用PatternFormat
3. 通过onValueChange获取值而非onChange，它能提供格式化值和原始数值
4. 对于只读显示，可以设置readOnly属性避免不必要的重新渲染

React Number Format 是处理数字输入和显示的强大工具，通过合理使用可以显著提升表单的用户体验和数据准确性。

react-number-format React component to format numbers in an input or as a text. 项目地址: https://gitcode.com/gh_mirrors/re/react-number-format