NumberPicker 数字输入框

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

注意事项

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

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

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

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

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

API

NumberPicker

ARIA and KeyBoard

代码示例

基本用法

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

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

查看源码在线预览

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
);

不可直接输入

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

查看源码在线预览

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);

最大最小值

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

当数据自动订正会触发 onCorrect

查看源码在线预览

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
);

步长

通过step控制每次加减步长

查看源码在线预览

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);

精度

通过 precision 控制小数点位数

查看源码在线预览

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);

大小

查看源码在线预览

import { NumberPicker } from '@alifd/next';
ReactDOM.render(
    <div>
        <NumberPicker defaultValue={0} size="large" />
        <br/><br/>
        <NumberPicker defaultValue={0} size="large" type="inline" />
    </div>,
    mountNode
);

不可用

不可用的 number picker。

查看源码在线预览

import { NumberPicker } from '@alifd/next';
ReactDOM.render(
    <div>
        <NumberPicker defaultValue={0} disabled/>
        <br/><br/>
        <NumberPicker defaultValue={0} type="inline" disabled />
    </div>,
    mountNode
);

格式化

查看源码在线预览

import { NumberPicker } from '@alifd/next';
const intlize = val => Intl.NumberFormat('en-US').format(val);
ReactDOM.render(
    <div>
        <NumberPicker format={intlize} defaultValue={5000} />
        <br/><br/>
        <NumberPicker label="p:" format={val => `${val}%`} defaultValue={85} />
        <br/><br/>
        <NumberPicker innerAfter="%" />
    </div>,
    mountNode
);

无障碍

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

查看源码在线预览

import { NumberPicker } from '@alifd/next';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 0,
            tip: '',
        };
        this.onChange = this.onChange.bind(this);
    }
    onChange(value, e) {
        let num = '';
        if(value >= 0){
            num = value;
        }else {
            num = `negative ${value * -1}`;
        }
        this.setState({
            value: value,
            tip: `${num}`,
        });
    }
    render() {
        const { value, tip } = this.state;
        return (<div>
            <span id="a11y-number-picker" aria-live="assertive"  aria-label={tip}></span>
            <NumberPicker type="inline" value={value} onChange={this.onChange} upBtnProps={{'aria-label':'increasing button'}} downBtnProps={{'aria-label':'decreasing button'}} aria-labelledby="a11y-number-picker" />
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

相关区块

暂无相关区块