NumberPicker 数字输入框

开发指南

何时使用

数字选择器,并对输入的数据做正确性检查、自动订正。

注意事项

  1. 自动订正可能会导致onChange返回值和你输入的数据不一样。

  2. 其中有些中间输入状态无法触发onChange,主要考虑到自动订正可能永远无法到达想要的值了。例如:

    • 0=>0.=>0.0=>0.01 中间两步不会触发onChange,因为如果订正会一直停留在0导致永远无法到达想要的值

    • min=10 的情况下, 输入 1=>12 第一步 1 不会触发onChange也不会订正数据,因为数字是一个一个输入的

  3. 如果输入时没触发onChange,会在onBlur检测数据正确性并触发onChange

基本用法

onChange 第二个参数 e.type 可以获取事件类型。



不可直接输入

用户不可直接输入编辑数据

最大最小值

min max 来限制 value 的最大最小值。

步长

通过 step 控制每次加减步长

精度

通过 precision 控制小数点位数

大小

不可用

不可用的 number picker。





%

格式化

无障碍

组件内置了部分支持无障碍, 但是额外需要开发者手动设置才能完整支持无障碍: 设置 upBtnprops 以及 downBtnprops,使得  读屏软件可以正确表达按键的具体功能。设置aria-live目的是NumberPicker组件值发生改变时,读屏软件会进行读取。

API

NumberPicker

参数说明类型默认值
size大小

可选值:
'medium'
Enum'medium'
type设置类型

可选值:
'normal'(普通)
'inline'(内联)
Enum'normal'
value当前值Number-
defaultValue默认值Number-
innerAfter数字后附加内容ReactNode-
disabled是否禁用Boolean-
step步长Number/String1
precision保留小数点后位数Number0
editable用户是否可以输入Booleantrue
autoFocus自动焦点Boolean-
onChange数值被改变的事件

签名:
Function(value: Number, e: Event) => void
参数:
value: {Number} 数据
e: {Event} DOM事件对象
Functionfunc.noop
onKeyDown键盘按下

签名:
Function() => void
Functionfunc.noop
onFocus焦点获得

签名:
Function() => void
Function-
onBlur焦点失去

签名:
Function() => void
Functionfunc.noop
onCorrect数值订正后的回调

签名:
Function(obj: Object) => void
参数:
obj: {Object} {currentValue,oldValue:String}
Functionfunc.noop
max最大值NumberInfinity
min最小值Number-Infinity
format格式化当前值

签名:
Function(value: Number) => String/Number
参数:
value: {Number} null
返回值:
{String/Number} null
Function-
upBtnProps增加按钮的propsObject-
downBtnProps减少按钮的propsObject-
labellabelReactNode-

ARIA and KeyBoard

按键说明
Up Arrow数字增加
Down Arrow数字减小