代码演示
如何引入
基本输入框
隐藏步进器
通过innerButtons,你可以将右侧的步进器隐藏进内部,仅hover时才会显示
hideButtons设为true,彻底隐藏步进器
尺寸
自定义显示格式与解析方式
formatter 和 parser 一对方法,一般需要同时设置,否则无法正确解析值
纯数字输入框
搭配 formatter 和 onNumberChange(>=v1.9.0) 可以实现纯数字输入框。
API 参考
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
autofocus | 自动获取焦点 | boolean | false | |
className | 类名 | string | - | |
defaultValue | 默认值 | number | ||
disabled | 禁用 | boolean | false | |
formatter | 指定输入框展示值的格式 | (value: number|string) => string | - | |
hideButtons | 为 true 时隐藏 “上/下” 按钮 | boolean | false | 1.0.0 |
innerButtons | 为 true 时 “上/下” 按钮显示在输入框内部 | boolean | false | 1.5.0 |
insetLabel | 前缀标签,优先级低于 prefix | string|ReactNode | ||
keepFocus | 点击按钮时保持输入框聚焦 | boolean | false | 1.10.0 |
max | 限定最大值 | number | Infinity | |
min | 限定最小值 | number | -Infinity | |
parser | 指定从 formatter 里转换回数字串的方式,和 formatter 搭配使用 | (str: string) => string | - | |
precision | 数值精度 | number | - | |
prefixCls | 前缀内容 | string|ReactNode | ||
pressInterval | 长按按钮时,多久触发一次点击事件,单位毫秒 | number | 250 | |
pressTimeout | 长按按钮时,延迟多久后触发点击事件,单位毫秒 | number | 250 | |
shiftStep | 按住 shift 键每次改变步数,可以为小数 | number | 1 | 1.5.0 |
showClear | 是否显示清除按钮 | boolean | false | 0.35.0 |
size | 输入框大小,可选值:"default"|"small"|"large" | string | 'default' | |
step | 每次改变步数,可以为小数 | number | 1 | |
style | 样式 | CSSProperties | - | |
suffix | 自定义后缀 | ReactNode | ||
value | 当前值 | number | ||
onBlur | 失去焦点时的回调 | (e: domEvent) => void | () => {} | 1.0.0 |
onChange | 变化回调 | (value: number|string) => void | - | |
onFocus | 获得焦点时的回调 | (e: domEvent) => void | () => {} | 1.0.0 |
onNumberChange | 数字变化回调 | (value: number) => void | - | 1.9.0 |
Methods
名称 | 描述 |
---|---|
blur() | 移出焦点 |
focus() | 获取焦点 |
Accessibility
ARIA
- 增减按钮添加了 button role,以表示是可以点击的按钮
- 使用 aria-valuenow 表示当前值,aria-valuemax 表示可以接受的最大值,aria-valuemin 表示可以接受的最小值