ant-design/components/input-number/index.zh-CN.md
2021-03-01 19:20:48 +08:00

2.6 KiB

category subtitle type title cover
Components 数字输入框 数据录入 InputNumber https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg

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

何时使用

当需要获取标准数值时。

API

属性如下

成员 说明 类型 默认值 版本
autoFocus 自动获取焦点 boolean false -
bordered 是否有边框 boolean true 4.12.0
decimalSeparator 小数点 string - -
defaultValue 初始值 number - -
disabled 禁用 boolean false -
formatter 指定输入框展示值的格式 function(value: number | string): string - -
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 数值精度 number - -
readOnly 只读 boolean false -
size 输入框大小 large | middle | small - -
step 每次改变步数,可以为小数 number | string 1 -
stringMode 字符值模式,开启后支持高精度小数。同时 onChange 将返回 string 类型 boolean false 4.13.0
value 当前值 number - -
onChange 变化回调 function(value: number | string | null) - -
onPressEnter 按下回车的回调 function(e) - -
onStep 点击上下箭头的回调 (value: number, info: { offset: number, type: 'up' | 'down' }) => void - 4.7.0

方法

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

FAQ

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

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

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

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