react-number-format

react-number-format 是一个 React 组件库，为开发者提供了一个方便的方式来格式化和显示数字值。它支持浮点值，并提供了各种格式选项，以满足不同的需求。

特性

• 可以格式化包含浮点数的数字值。
• 支持自定义显示格式，如千位分隔符、小数点精度、货币符号等。
• 提供了各种选项，包括前缀、后缀、展位符等，以满足不同的需求。
• 支持按键控制：可以通过键盘输入或按键控制增加/减少数值。
• 可以处理其他类型的输入，如日期、电话号码等。

安装

要安装 react-number-format，只需在项目中运行以下命令：

npm install react-number-format

或者使用 yarn：

yarn add react-number-format

使用示例

以下是一个示例，演示了如何使用 react-number-format 组件来格式化一个浮点数值：

import React from 'react';
import NumberFormat from 'react-number-format';

function NumberFormatExample() {
  return (
    <NumberFormat
      value={123456.789}
      displayType={'text'}
      thousandSeparator={true}
      decimalScale={2}
      prefix={'$'}
      renderText={(formattedValue) => <div>{formattedValue}</div>}
    />
  );
}

export default NumberFormatExample;

在上面的示例中，value 属性设置为要格式化的数字值，displayType 属性设置为 'text' 以显示为文本，thousandSeparator 属性设置为 true 以在千位上添加逗号分隔符，decimalScale 属性设置为 2 以保留两位小数，prefix 属性设置为 '$' 以添加美元符号作为前缀。

API 文档

以下是 react-number-format 的主要 API：

属性

• value (Number): 要格式化的数字值。
• displayType (String, 可选): 显示类型，可以是 'text'、'input' 或 'inputNumber'。默认为 'text'。
• thousandSeparator (Boolean, 可选): 是否使用千位分隔符。默认为 false。
• decimalSeparator (String, 可选): 小数点分隔符。默认为 '.'。
• decimalScale (Number, 可选): 小数点精度。默认为 0，表示不显示小数部分。
• prefix (String, 可选): 前缀字符串。
• suffix (String, 可选): 后缀字符串。
• renderText (Function, 可选): 自定义渲染函数，用于修改显示的文本。

方法

• format(value: number | string): string: 格式化给定的数字值，并返回格式化后的字符串。

更多资源

• GitHub 仓库
• npm 包

欲了解更多详细 API 信息，请查看 官方文档。

感谢您使用 react-number-format 组件库，希望能够帮助您更便捷地格式化和显示数字值！