ant-design/components/input-number/index.zh-CN.md

4.9 KiB
Raw Blame History

category subtitle group title cover coverDark demo
Components 数字输入框 数据录入 InputNumber https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original
cols
2

通过鼠标或键盘,输入范围内的数值。

何时使用

当需要获取标准数值时。

代码演示

基本 三种大小 前置/后置标签 不可用 高精度小数 格式化展示 键盘行为 形态变体 Filled Debug 超出边界 前缀 自定义状态 图标按钮 _InternalPanelDoNotUseOrYouWillBeFired 覆盖组件样式

API

通用属性参考:通用属性

参数 说明 类型 默认值 版本
addonAfter 带标签的 input设置后置标签 ReactNode - 4.17.0
addonBefore 带标签的 input设置前置标签 ReactNode - 4.17.0
autoFocus 自动获取焦点 boolean false -
changeOnBlur 是否在失去焦点时,触发 onChange 事件(例如值超出范围时,重新限制回范围并触发事件) boolean true 5.11.0
controls 是否显示增减按钮,也可设置自定义箭头图标 boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } - 4.19.0
decimalSeparator 小数点 string - -
placeholder 占位符 string -
defaultValue 初始值 number - -
disabled 禁用 boolean false -
formatter 指定输入框展示值的格式 function(value: number | string, info: { userTyping: boolean, input: string }): string - info: 4.17.0
keyboard 是否启用键盘快捷行为 boolean true 4.12.0
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' - 4.19.0
prefix 带有前缀图标的 input ReactNode - 4.17.0
size 输入框大小 large | middle | small - -
step 每次改变步数,可以为小数 number | string 1 -
stringMode 字符值模式,开启后支持高精度小数。同时 onChange 将返回 string 类型 boolean false 4.13.0
value 当前值 number - -
variant 形态变体 outlined | borderless | filled outlined 5.13.0
onChange 变化回调 function(value: number | string | null) - -
onPressEnter 按下回车的回调 function(e) - -
onStep 点击上下箭头的回调 (value: number, info: { offset: number, type: 'up' | 'down' }) => void - 4.7.0

方法

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

主题变量Design Token

FAQ

为何受控模式下,value 可以超出 minmax 范围?

在受控模式下,开发者可能自行存储相关数据。如果组件将数据约束回范围内,会导致展示数据与实际存储数据不一致的情况。这使得一些如表单场景存在潜在的数据问题。

为何动态修改 minmaxvalue 超出范围不会触发 onChange 事件?

onChange 事件为用户触发事件,自行触发会导致表单库误以为变更来自用户操作。我们以错误样式展示超出范围的数值。

为何 onBlur 等事件获取不到正确的 value

InputNumber 的值由内部逻辑封装而成,通过 onBlur 等事件获取的 event.target.value 仅为 DOM 元素的 value 而非 InputNumber 的实际值。例如通过 formatter 或者 decimalSeparator 更改展示格式DOM 中得到的就是格式化后的字符串。你总是应该通过 onChange 获取当前值。