数字选择器,并对输入的数据做正确性检查、自动订正。
自动订正可能会导致onChange返回值和你输入的数据不一样。
其中有些中间输入状态无法触发onChange,主要考虑到自动订正可能永远无法到达想要的值了。例如:
0
=>0.
=>0.0
=>0.01
中间两步不会触发onChange,因为如果订正会一直停留在0导致永远无法到达想要的值1
=>12
第一步 1
不会触发onChange也不会订正数据,因为数字是一个一个输入的如果输入时没触发onChange,会在onBlur检测数据正确性并触发onChange
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
获取
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);
用户不可直接输入编辑数据
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
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控制每次加减步长
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 控制小数点位数
import { NumberPicker } from '@alifd/next';
ReactDOM.render(
<div>
<NumberPicker defaultValue={0} size="large" />
<br/><br/>
<NumberPicker defaultValue={0} size="large" type="inline" />
</div>,
mountNode
);
import { NumberPicker } from '@alifd/next';
ReactDOM.render(
<div>
<NumberPicker defaultValue={0} disabled/>
<br/><br/>
<NumberPicker defaultValue={0} type="inline" disabled />
</div>,
mountNode
);
不可用的 number picker。
import { NumberPicker } from '@alifd/next';
const intlize = val => Intl.NumberFormat('en-US').format(val);
ReactDOM.render(
<div>
<NumberPicker format={intlize} />
</div>,
mountNode
);
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,使得读屏软件可以正确表达按键的具体功能。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 | - |
按键 | 说明 |
---|---|
Up Arrow | 数字增加 |
Down Arrow | 数字减小 |