使用import { InputNumber } from 'antd'; |
文档贡献者
当需要获取标准数值时。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 带标签的 input，设置后置标签，请使用 Space.Compact 替换 | ReactNode | - | 4.17.0 | |
| 带标签的 input，设置前置标签，请使用 Space.Compact 替换 | ReactNode | - | 4.17.0 | |
| changeOnBlur | 是否在失去焦点时，触发 onChange 事件（例如值超出范围时，重新限制回范围并触发事件） | boolean | true | 5.11.0 |
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | - |
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | |
| decimalSeparator | 小数点 | string | - | - |
| placeholder | 占位符 | string | - | |
| defaultValue | 初始值 | number | - | - |
| disabled | 禁用 | boolean | false | - |
| formatter | 指定输入框展示值的格式 | function(value: number | string, info: { userTyping: boolean, input: string }): string | - | |
| keyboard | 是否启用键盘快捷行为 | boolean | true | |
| max | 最大值 | number | Number.MAX_SAFE_INTEGER | - |
| min | 最小值 | number | Number.MIN_SAFE_INTEGER | - |
| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function(string): number | - | - |
| precision | 数值精度，配置 formatter 时会以 formatter 为准 | number | - | - |
| readOnly | 只读 | boolean | false | - |
| status | 设置校验状态 | 'error' | 'warning' | - | |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | - |
| prefix | 带有前缀图标的 input | ReactNode | - | |
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
| size | 输入框大小 | large | medium | small | - | - |
| step | 每次改变步数，可以为小数 | number | string | 1 | - |
| stringMode | 字符值模式，开启后支持高精度小数。同时 onChange 将返回 string 类型 | boolean | false | 4.13.0 |
| mode | 展示输入框或拨轮 | 'input' | 'spinner' | 'input' | |
| value | 当前值 | number | - | - |
| variant | 形态变体 | outlined | borderless | filled | underlined | outlined | 5.13.0 | underlined: 5.24.0 |
| onChange | 变化回调 | function(value: number | string | null) | - | - |
| onPressEnter | 按下回车的回调 | function(e) | - | - |
| onStep | 点击上下箭头、键盘、滚轮的回调 | (value: number, info: { offset: number, type: 'up' | 'down', emitter: 'handler' | 'keydown' | 'wheel' }) => void | - | 4.7.0 |
是否带边框，请使用 variant 替代 | boolean | true | - |
| 名称 | 说明 | 参数 | 版本 |
|---|---|---|---|
| blur() | 移除焦点 | - | |
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | cursor - 5.22.0 |
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| activeBg | 输入框激活状态时背景颜色 | string | #ffffff |
| activeBorderColor | 激活态边框色 | string | #1677ff |
| activeShadow | 激活态阴影 | string | 0 0 0 2px rgba(5,145,255,0.1) |
| addonBg | 前/后置标签背景色 | string | rgba(0,0,0,0.02) |
| controlWidth | 输入框宽度 | number | 90 |
| errorActiveShadow | 错误状态时激活态阴影 | string | 0 0 0 2px rgba(255,38,5,0.06) |
| filledHandleBg | 面性变体操作按钮背景色 | string | #f0f0f0 |
| handleActiveBg | 操作按钮激活背景色 | string | rgba(0,0,0,0.02) |
| handleBg | 操作按钮背景色 | string | #ffffff |
| handleBorderColor | 操作按钮边框颜色 | string | #d9d9d9 |
| handleFontSize | 操作按钮图标大小 | number | 7 |
| handleHoverColor | 操作按钮悬浮颜色 | string | #1677ff |
| handleVisible | 操作按钮可见性 | true | "auto" | auto |
| handleWidth | 操作按钮宽度 | number | 22 |
| hoverBg | 输入框hover状态时背景颜色 | string | #ffffff |
| hoverBorderColor | 悬浮态边框色 | string | #4096ff |
| inputFontSize | 字体大小 | number | 14 |
| inputFontSizeLG | 大号字体大小 | number | 16 |
| inputFontSizeSM | 小号字体大小 | number | 14 |
| paddingBlock | 输入框纵向内边距 | number | 4 |
| paddingBlockLG | 大号输入框纵向内边距 | number | 7 |
| paddingBlockSM | 小号输入框纵向内边距 | number | 0 |
| paddingInline | 输入框横向内边距 | number | 11 |
| paddingInlineLG | 大号输入框横向内边距 | number | 11 |
| paddingInlineSM | 小号输入框横向内边距 | number | 7 |
| warningActiveShadow | 警告状态时激活态阴影 | string | 0 0 0 2px rgba(255,215,5,0.1) |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgContainer | 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。 | string | #ffffff |
| colorBgContainerDisabled | 控制容器在禁用状态下的背景色。 | string | rgba(0,0,0,0.04) |
| colorBorder | 默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。 | string | #d9d9d9 |
| colorBorderDisabled | 控制元素在禁用状态下的边框颜色。 | string | #d9d9d9 |
| colorError | 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。 | string | #ff4d4f |
| colorErrorAffix | 控制表单控件前后缀在错误状态下的颜色。 | string | #ff4d4f |
| colorErrorBg | 错误色的浅色背景颜色 | string | #fff2f0 |
| colorErrorBgHover | 错误色的浅色背景色悬浮态 | string | #fff1f0 |
| colorErrorBorderHover | 错误色的描边色悬浮态 | string | #ffa39e |
| colorErrorText | 错误色的文本默认态 | string | #ff4d4f |
| colorFillSecondary | 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。 | string | rgba(0,0,0,0.06) |
| colorFillTertiary | 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。 | string | rgba(0,0,0,0.04) |
| colorIcon | 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 * | string | rgba(0,0,0,0.45) |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextDisabled | 控制禁用状态下的字体颜色。 | string | rgba(0,0,0,0.25) |
| colorTextPlaceholder | 控制占位文本的颜色。 | string | rgba(0,0,0,0.25) |
| colorWarning | 用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。 | string | #faad14 |
| colorWarningAffix | 控制表单控件前后缀在警告状态下的颜色。 | string | #faad14 |
| colorWarningBg | 警戒色的浅色背景颜色 | string | #fffbe6 |
| colorWarningBgHover | 警戒色的浅色背景色悬浮态 | string | #fff1b8 |
| colorWarningBorderHover | 警戒色的描边色悬浮态 | string | #ffd666 |
| colorWarningText | 警戒色的文本默认态 | string | #faad14 |
| borderRadius | 基础组件的圆角大小，例如按钮、输入框、卡片等 | number | 6 |
| borderRadiusLG | LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。 | number | 8 |
| borderRadiusSM | SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角 | number | 4 |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| lineHeightLG | 大型文本行高 | number | 1.5 |
| lineType | 用于控制组件边框、分割线等的样式，默认是实线 | string | solid |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| paddingXXS | 控制元素的极小内间距。 | number | 4 |
value 可以超出 min 和 max 范围？在受控模式下，开发者可能自行存储相关数据。如果组件将数据约束回范围内，会导致展示数据与实际存储数据不一致的情况。这使得一些如表单场景存在潜在的数据问题。
min 和 max 让 value 超出范围不会触发 onChange 事件？onChange 事件为用户触发事件，自行触发会导致表单库误以为变更来自用户操作。我们以错误样式展示超出范围的数值。
onBlur 等事件获取不到正确的 value？InputNumber 的值由内部逻辑封装而成，通过 onBlur 等事件获取的 event.target.value 仅为 DOM 元素的 value 而非 InputNumber 的实际值。例如通过 formatter 或者 decimalSeparator 更改展示格式，DOM 中得到的就是格式化后的字符串。你总是应该通过 onChange 获取当前值。
changeOnWheel 无法控制鼠标滚轮是否改变数值？不建议使用
type属性
InputNumber 组件允许你使用 input 元素的所有属性最终透传至 input 元素，当你传入 type="number" 时 input 元素也会添加这个属性，这会使 input 元素触发原生特性（允许鼠标滚轮改变数值），从而导致 changeOnWheel 无法控制鼠标滚轮是否改变数值。