NumberPicker  数字输入框

开发指南#

何时使用#

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

注意事项#

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

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

    • 0=>0.=>0.0=>0.01 中间两步不会触发onChange，因为如果订正会一直停留在0导致永远无法到达想要的值
    • min=10 的情况下, 输入 1=>12 第一步 1 不会触发onChange也不会订正数据，因为数字是一个一个输入的

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

API#

# 代码演示

# 基本用法 



import { NumberPicker } from '@alifd/next';

function onChange(value, e) {
    console.log(value, e.type, e.triggerType);
}

ReactDOM.render(
    <div>
        <NumberPicker onChange={onChange}/>
        <br/><br/>
        <NumberPicker defaultValue={0} type="inline" onChange={onChange}/>
    </div>,
    mountNode
);

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

如果是点击+ - 触发，可以通过 e.triggerType 获取

code collapse

# 不可直接输入 



import { NumberPicker, Button } from '@alifd/next';


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editable: false,
            value: 0
        };
    }

    toogle() {
        this.setState({
            editable: !this.state.editable
        });
    }

    onChange(value) {
        console.log('changed', value);
        this.setState({
            value: value
        });
    }

    render() {
        return (<div>
            <NumberPicker onChange={this.onChange.bind(this)} value={this.state.value}
                editable={this.state.editable}/><br/><br/>
            <Button onClick={this.toogle.bind(this)}>Toggle to {!this.state.editable ? 'editable' : 'uneditable'}</Button>
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

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

code collapse

# 最大最小值 

import { NumberPicker } from '@alifd/next';

function onChange(value, e) {
    console.log('onChange', value, e);
}

function onCorrect(obj) {
    console.log('onCorrect', obj);
}
ReactDOM.render(
    <div>
        <NumberPicker type="inline" step={3} min={6} max={30} defaultValue={6}
            onChange={onChange} onCorrect={onCorrect}/>
    </div>,
    mountNode
);

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

当数据自动订正会触发 onCorrect

code collapse

# 步长 

import { NumberPicker } from '@alifd/next';

function onChange(value) {
    console.log('changed', value);
}
function onCorrect(obj) {
    console.log(obj);
}
ReactDOM.render(
    <div>
        <NumberPicker defaultValue={0} onChange={onChange} onCorrect={onCorrect} step={.01}/>
    </div>, mountNode);

通过step控制每次加减步长

code collapse

# 精度 

import { NumberPicker } from '@alifd/next';

function onChange(value) {
    console.log('changed', value);
}
function onCorrect(obj) {
    console.log(obj);
}
ReactDOM.render(
    <div>
        <NumberPicker defaultValue={-3.99} onChange={onChange} onCorrect={onCorrect} step={2} precision={2}/>
    </div>, mountNode);

通过 precision 控制小数点位数

code collapse

# 大小 



import { NumberPicker } from '@alifd/next';

ReactDOM.render(
    <div>
        <NumberPicker defaultValue={0} size="large" />
        <br/><br/>
        <NumberPicker defaultValue={0} size="large" type="inline" />
    </div>,
    mountNode
);
code collapse

# 不可用 



import { NumberPicker } from '@alifd/next';

ReactDOM.render(
    <div>
        <NumberPicker defaultValue={0} disabled/>
        <br/><br/>
        <NumberPicker defaultValue={0} type="inline" disabled />
    </div>,
    mountNode
);

不可用的 number picker。

code collapse

# 格式化 

import { NumberPicker } from '@alifd/next';

const intlize = val => Intl.NumberFormat('en-US').format(val);

ReactDOM.render(
    <div>
        <NumberPicker format={intlize} />
    </div>,
    mountNode
);
code collapse

# 无障碍 

import { NumberPicker } from '@alifd/next';

function onChange(value, e) {
    console.log(value, e.type, e.triggerType);
}

ReactDOM.render(
    <div>
        <NumberPicker upBtnProps={{'aria-label':'increasing button'}} downBtnProps={{'aria-label':'decreasing button'}} defaultValue={0} type="inline" onChange={onChange}/>
    </div>,
    mountNode
);

组件内置了部分支持无障碍, 但是额外需要开发者手动设置才能完整支持无障碍: 设置upBtnprops以及downBtnprops，使得读屏软件可以正确表达按键的具体功能。

code collapse

# API

NumberPicker#

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

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

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

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

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

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

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

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

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

ARIA and KeyBoard#

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