# @ericblade/react-currency-input 中文文档

规范地址：https://npmcn.com/package/%40ericblade/react-currency-input/

版本：1\.4\.6
npm 元数据更新时间：2026-10-20T00:42:18.016Z
中文译文更新时间：2026-11-13T20:55:51.093Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ericblade/react-currency-input
原文对照：https://npmcn.com/package/%40ericblade/react-currency-input/?lang=original
项目主页：https://github.com/ericblade/react-currency-input#readme
源码仓库：https://github.com/ericblade/react-currency-input

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：184 kB，25 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=16\.14\.0 \<20，react-dom \>=16\.14\.0 \<20
- 首次发布：2022-01-08T22:03:17.695Z
- 最新版本发布：2026-10-20T00:42:17.682Z
- 近 30 天下载量：6050（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 2 个）

## 中文简介

输入货币金额的反应组件

## 安装

```sh
npm install @ericblade/react-currency-input
```

也可以使用：`pnpm add @ericblade/react-currency-input`、`yarn add @ericblade/react-currency-input`、`bun add @ericblade/react-currency-input`

## README

# @ ericblade/ react- 货币输入

[![Rolling Versions](https://img.shields.io/badge/Rolling%20Versions-Enabled-brightgreen)](https://rollingversions.com/ericblade/react-currency-input)

货币输入的现代反应组件. 叉从 [https://github.com/jsillitoe/react-货币投入](https://github.com/jsillitoe/react-currency-input)

支持自定义小数和千位分隔符以及精确度.

输入时格式独特,包括小数和千分数,精度,前缀和后缀. 我还没有找到任何其他的货币投入来做这件事, 并且原作已经很久没有被触动过,所以我叉了这个.

# 原作以来的变化

-   现在在类型脚本中
-   支持反应 16、17、18、19
-   全新的自动测试设置 ~齐压~ Playwright (1.4.2+中新建) (中文(简体) )
-   自动化测试设置更加彻底
-   Cart选取重装 似乎到处都行
-   用于处理 Gboard 的问题

## 测试整个反应版本

此套件可在当地针对回放16至19进行测试:

```bash
npm run test:react16
npm run test:react17
npm run test:react18
npm run test:react19
```

全部按顺序运行 :

```bash
npm run test:matrix
```

## 代码演示

有一个代码Pen,你可以用它来观察动作中的组件, 玩它的所有参数来观察它是如何工作的。 它用React和TypeScript来写. [代码链接](https://codepen.io/ericblade/pen/NWaLbGK)

有第二个 CodePen, 它在源代码的"示例"目录中反映了演示应用: [代码链接](https://codepen.io/ericblade/pen/JjraWdG)

## 以下预叉读取

## 变动

## 页:1

-   被贬"上变"选取"上变". 此修改参数顺序以更好地匹配 React 默认的输入处理
-   更新的依赖关系
-   已添加解析Float多填充
-   处理活动汇集问题的持久活动
-   其他错误修正 .

## 安装

```bash
npm install @ericblade/react-currency-input --save
```

## 一体化

您可以存储您状态中的更改处理器所传递的值 .

```javascript
import React from 'react'
import CurrencyInput from '@ericblade/react-currency-input';

const MyApp = React.createClass({
    getInitialState(){
        return ({amount: "0.00"});
    },

    handleChange(event, maskedvalue, floatvalue){
        this.setState({amount: maskedvalue});
    },
    render() {
        return (
            <div>
                <CurrencyInput value={this.state.amount} onChangeEvent={this.handleChange}/>
            </div>
        );
    }
});
export default MyApp
```

您也可以指定一个引用, 然后使用调用调用 MaskedValue () 访问该值 .

```javascript
import React from 'react'
import CurrencyInput from '@ericblade/react-currency-input';

const MyApp = React.createClass({
    handleSubmit(event){
        event.preventDefault();
        console.log(this.refs.myinput.getMaskedValue())
    },
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <CurrencyInput ref="myinput" />
            </form>
        );
    }
});
export default MyApp
```

## 分离器和精度

指定自定义小数和千位分隔符 :

```javascript
    // 1.234.567,89
    <CurrencyInput decimalSeparator="," thousandSeparator="." />
```

指定具体精确度 :

```javascript
    // 123,456.789
    <CurrencyInput precision="3" />
```

```javascript
    // 123,456,789
    <CurrencyInput precision="0" />
```

## 货币

可选设置货币符号作为前缀或后缀

```javascript
    // $1,234,567.89
    <CurrencyInput prefix="$" />
```

```javascript
    // 1,234,567.89 kr
    <CurrencyInput suffix=" kr" />
```

在前缀之前出现负数

```javascript
    // -$20.00
    <CurrencyInput prefix="$" value="-20.00" />
```

所有其他属性都应用于输入元素. 例如,可以集成靴子纹章:

```javascript
    <CurrencyInput className="form-control" />
```

## 选项

| 选项 | 默认值 | 说明 |
| --- | --- | --- |
| 价值 | 0 个 | 初始货币价值 |
| 变化事件 | 无 | 回调处理值变化的函数 |
| 精确度 | 2个 | 小数点分隔符后的数字 |
| 小数分隔符 | '' | 小数分隔符 |
| 千位分隔符 | ','" | 千分仪 |
| 输入类型 | "文字" (中文(简体) ) | 输入字段标记类型 。 您也许想要使用 `number` 或者说 `tel`\* 联合国 |
| 允许无 | 虚假 | 允许输入中的负数 |
| 允许 | 虚假 | 若无 `value` ,如果开始为无效(`true`)或“(......)`false`(中文(简体) ) |
| 选择全部焦点 | 虚假 | 选择焦点或非焦点上的所有文本 |
| 前缀 | '' | 货币前缀 |
| 后缀 | '' | 货币后缀 |
| 自动聚焦 | 虚假 | 自动聚焦 |
| 点击 | 无 | 通过输入 |
| 焦点 | 无 | 内部焦点处理后调用 |
| 布莱尔 | 无 | 内部模糊处理后调用 |
| 样式 | 无 | 通过输入 |
| 编号 | 无 | 通过输入 |
| 选项卡索引 | 无 | 通过输入 |

\* 联合国**说明:** 启用任何与口罩相关的特性,例如前缀,后缀或带有输入Type="数字"或"tel"的分隔符,都可能触发出错. 在这些输入类型中,大多数字符无效.

## 常见问题

### @ericblade/react-currency-input 是什么？

输入货币金额的反应组件

### 如何安装 @ericblade/react-currency-input？

在项目目录运行 npm install @ericblade/react-currency-input，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.14\.0 \<20）、react-dom（\>=16\.14\.0 \<20）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ericblade/react-currency-input 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ericblade/react-currency-input 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ericblade/react-currency-input 可以商用吗？

@ericblade/react-currency-input 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ericblade/react-currency-input 的下载量有多少？

根据 npm 官方下载统计，@ericblade/react-currency-input 在 2026/10/14 – 2026/11/12 这 30 天内被下载 6,050 次，日均约 202 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ericblade/react-currency-input 还在维护吗？

最新版本 1\.4\.6 发布于 2026/10/20（24 天前）；至今共发布 18 个版本，其中过去 12 个月发布了 2 个；首次发布于 2022/01/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。