NumberField 数字输入框
通过鼠标或键盘,输入范围内的数值。
何时使用
当需要获取标准数值时。
如果要输入保留两位小数格式的金额,请使用 Currency 组件。
代码演示
基本使用
基本使用。
import React from 'react';
import ReactDOM from 'react-dom';
import { NumberField, Row, Col } from 'choerodon-ui/pro';
function log(value) {
console.log(value);
}
ReactDOM.render(
<div>
<Row style={{ marginBottom: 10 }} gutter={10}>
<Col span={12}>
<NumberField placeholder="请输入整数" step={1} onChange={log} />
</Col>
<Col span={12}>
<NumberField placeholder="精确两位小数" step={0.01} min={0} />
</Col>
</Row>
<Row gutter={10}>
<Col span={12}>
<NumberField
placeholder="step = 1.1, min = 0.3, max = 9"
onChange={log}
step={1.1}
min={0.3}
max={9}
/>
</Col>
<Col span={12}>
<NumberField
placeholder="step = 1.1, min = -0.3"
受控数字输入框
受控数字输入框
import React from 'react';
import ReactDOM from 'react-dom';
import { NumberField } from 'choerodon-ui/pro';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'default',
};
}
handleChange = (value, oldValue) => {
console.log('[newValue]', value, '[oldValue]', oldValue);
this.setState({
value,
});
}
handleInput = (e) => {
console.log('[input]', e.target.value);
}
render() {
return <NumberField value={this.state.value} onChange={this.handleChange} onInput={this.handleInput} />;
}
}
数据源
绑定数据源。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, NumberField } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{ name: 'age', type: 'number', defaultValue: 100000000000000, required: true },
],
events: {
update: handleDataSetChange,
},
});
render() {
return <NumberField dataSet={this.ds} name="age" />;
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
最大最小值
指定最大最小值。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, NumberField, Row, Col } from 'choerodon-ui/pro';
import moment from 'moment';
function filterDate(currentDate) {
const dayInWeek = currentDate.get('d');
return dayInWeek !== 0 && dayInWeek !== 1;
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{ name: 'start', type: 'number', max: 'end', step: 1 },
{ name: 'end', type: 'number', min: 'start', step: 1 },
],
});
render() {
return (
<Row gutter={10}>
<Col span={6}>
<NumberField dataSet={this.ds} name="start" placeholder="start" />
</Col>
<Col span={6}>
<NumberField dataSet={this.ds} name="end" placeholder="end" />
</Col>
范围
范围。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, NumberField, Row, Col } from 'choerodon-ui/pro';
function handleDataSetChange({ value, oldValue }) {
console.log('[range dataset newValue]', value, '[oldValue]', oldValue);
}
function handleChange(value, oldValue) {
console.log('[range newValue]', value, '[oldValue]', oldValue);
}
function rangeValidator(value, name) {
console.log(`[validation ${name} value]`, value);
return true;
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'number1',
type: 'number',
range: ['start', 'end'],
defaultValue: { start: 0, end: 4 },
required: true,
min: 1,
max: 10,
step: 1,
validator: rangeValidator,
},
{
name: 'number2',
type: 'number',
多值
通过属性multiple
设置为多值。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, NumberField, Row, Col } from 'choerodon-ui/pro';
function handleChange(value, oldValue) {
console.log('[multiple]', value, '[oldValue]', oldValue);
}
function handleDataSetChange({ record, name, value, oldValue }) {
console.log('[dataset multiple]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
const data = [{
user: [31],
}];
class App extends React.Component {
ds = new DataSet({
data,
fields: [
{ name: 'size', type: 'number', label: '尺码', multiple: true, step: 1, max: 10, min: 5, required: true },
],
events: {
update: handleDataSetChange,
},
});
render() {
API
NumberField
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
min | 最小值 | number | |
max | 最大值 | number | |
step | 步距 | number | |
nonStrictStep | 非严格步距,在非严格步距下,允许输入值不为步距的倍数加上最小值,也允许在设置整数步距的情况下输入小数 | boolean | false |
longPressPlus | 长按累加开关 | boolean | true |
更多属性请参考 TextField。
Static method
名称 | 说明 | 参数 |
---|---|---|
format(value, lang, options) | 数字格式化 | value - 数值 lang - 语言代码 options - 详见Intl.NumberFormatOptions |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .