# 数字输入框 InputNumber

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/input-number
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

仅允许输入数字格式的输入框。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：通过鼠标或者键盘输入范围内的标准数值。
- **按钮模式**：指定 `mode` 为 `button` 来使用带按钮的数字输入框。
- **四种尺寸**：设置 `size` 可以使用四种尺寸（`mini`, `small`, `default`, `large`）的数字输入框。高度分别对应`24px`、`28px`、`32px`、`36px`。
- **精度和步长**：通过 `precision` 来设置数字精度。当 `precision` 小于 `step` 的小数位时，精度取 `step` 的小数个数。
- **格式化展示值**：通过 `formatter`、 `parser` 配合使用可以定义输入框展示值。 通过 `formatter` 中的 `userTyping` 参数，判断是否正在输入，可以延迟显示 `formatter` 后的值
- **前缀及后缀**：可以添加前缀和后缀。
- **高精度**：通过 `strictMode` 开启严格模式以支持更高精度，`onChange` 此时将会返回字符串。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### InputNumber

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|disabled|是否禁用|boolean |`-`|-|
|error|错误状态|boolean |`-`|-|
|hideControl|隐藏右侧按钮|boolean |`-`|-|
|readOnly|是否只读|boolean |`-`|2.17.0|
|strictMode|严格模式下，`onChange` 回调将返回字符串类型|boolean |`-`|2.42.0|
|max|最大值|number |`Infinity`|-|
|min|最小值|number |`-Infinity`|-|
|precision|数字精度。设置精度小于`step`的小数位时，取`step`的小数个数。|number |`-`|-|
|step|数字变化步长|number |`1`|-|
|placeholder|默认显示文案|string |`-`|-|
|mode|`embed` - 按钮内嵌模式，`button` - 左右按钮模式|'embed' \| 'button' |`embed`|-|
|size|不同尺寸的数字输入框。分别对应 `24px`, `28px`, `32px`, `36px`|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
|prefix|显示前缀|ReactNode |`-`|-|
|suffix|显示后缀|ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|defaultValue|初始值|number \| string |`-`|-|
|icons|配置图标|{up?: ReactNode;down?: ReactNode;plus?: ReactNode;minus?: ReactNode;} |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|value|当前值|undefined \| number \| string |`-`|-|
|formatter|定义输入框展示值|(value: number \| string, info: { userTyping: boolean; input: string }) => string |`-`|Param `info` in `2.41.0`|
|onBlur|输入框失去聚焦事件的回调|(e) => void |`-`|-|
|onChange|变化回调|(value: number, reason?: [InputNumberValueChangeReason](#inputnumbervaluechangereason)) => void |`-`|`reason` in 2.61.0|
|onFocus|输入框聚焦事件的回调|(e) => void |`-`|-|
|onKeyDown|键盘事件回调|(e: Event) => void |`-`|-|
|parser|从 formatter 转换为数字，和 formatter 搭配使用。|(value: string) => number \| string |`(input) => input.replace(/[^\w\.-]+/g, '')`|-|

### InputNumberValueChangeReason

```js
// 造成输入框值改变的原因：用户输入、增加、减少、超出范围值修正
export type InputNumberValueChangeReason =
  | "manual"
  | "increase"
  | "decrease"
  | "outOfRange";
```

## 方法/Methods

|名称|描述|
|---|:---:|
|blur()|	移除焦点|
|focus()|	获取焦点|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt