NumberField 数字输入框

通过鼠标或键盘,输入范围内的数值。

何时使用

当需要获取标准数值时。

如果要输入保留两位小数格式的金额,请使用 Currency 组件。

代码演示

基本使用

基本使用。

NumberField数字输入框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { NumberField, Row, Col } from 'choerodon-ui/pro';
  4. function log(value) {
  5. console.log(value);
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <Row style={{ marginBottom: 10 }} gutter={10}>
  10. <Col span={12}>
  11. <NumberField placeholder="请输入整数" step={1} onChange={log} />
  12. </Col>
  13. <Col span={12}>
  14. <NumberField placeholder="精确两位小数" step={0.01} min={0} />
  15. </Col>
  16. </Row>
  17. <Row gutter={10}>
  18. <Col span={12}>
  19. <NumberField
  20. placeholder="step = 1.1, min = 0.3, max = 9"
  21. onChange={log}
  22. step={1.1}
  23. min={0.3}
  24. max={9}
  25. />
  26. </Col>
  27. <Col span={12}>
  28. <NumberField
  29. placeholder="step = 1.1, min = -0.3"

受控数字输入框

受控数字输入框

NumberField数字输入框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { NumberField } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. value: 'default',
  9. };
  10. }
  11. handleChange = (value, oldValue) => {
  12. console.log('[newValue]', value, '[oldValue]', oldValue);
  13. this.setState({
  14. value,
  15. });
  16. }
  17. handleInput = (e) => {
  18. console.log('[input]', e.target.value);
  19. }
  20. render() {
  21. return <NumberField value={this.state.value} onChange={this.handleChange} onInput={this.handleInput} />;
  22. }
  23. }

数据源

绑定数据源。

NumberField数字输入框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, NumberField } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
  6. }
  7. class App extends React.Component {
  8. ds = new DataSet({
  9. autoCreate: true,
  10. fields: [
  11. { name: 'age', type: 'number', defaultValue: 100000000000000, required: true },
  12. ],
  13. events: {
  14. update: handleDataSetChange,
  15. },
  16. });
  17. render() {
  18. return <NumberField dataSet={this.ds} name="age" />;
  19. }
  20. }
  21. ReactDOM.render(
  22. <App />,
  23. document.getElementById('container')
  24. );

最大最小值

指定最大最小值。

NumberField数字输入框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, NumberField, Row, Col } from 'choerodon-ui/pro';
  4. import moment from 'moment';
  5. function filterDate(currentDate) {
  6. const dayInWeek = currentDate.get('d');
  7. return dayInWeek !== 0 && dayInWeek !== 1;
  8. }
  9. class App extends React.Component {
  10. ds = new DataSet({
  11. autoCreate: true,
  12. fields: [
  13. { name: 'start', type: 'number', max: 'end', step: 1 },
  14. { name: 'end', type: 'number', min: 'start', step: 1 },
  15. ],
  16. });
  17. render() {
  18. return (
  19. <Row gutter={10}>
  20. <Col span={6}>
  21. <NumberField dataSet={this.ds} name="start" placeholder="start" />
  22. </Col>
  23. <Col span={6}>
  24. <NumberField dataSet={this.ds} name="end" placeholder="end" />
  25. </Col>

范围

范围。

NumberField数字输入框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, NumberField, Row, Col } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ value, oldValue }) {
  5. console.log('[range dataset newValue]', value, '[oldValue]', oldValue);
  6. }
  7. function handleChange(value, oldValue) {
  8. console.log('[range newValue]', value, '[oldValue]', oldValue);
  9. }
  10. function rangeValidator(value, name) {
  11. console.log(`[validation ${name} value]`, value);
  12. return true;
  13. }
  14. class App extends React.Component {
  15. ds = new DataSet({
  16. autoCreate: true,
  17. fields: [
  18. {
  19. name: 'number1',
  20. type: 'number',
  21. range: ['start', 'end'],
  22. defaultValue: { start: 0, end: 4 },
  23. required: true,
  24. min: 1,
  25. max: 10,
  26. step: 1,
  27. validator: rangeValidator,
  28. },
  29. {
  30. name: 'number2',
  31. type: 'number',

多值

通过属性multiple设置为多值。

NumberField数字输入框 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, NumberField, Row, Col } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[multiple]', value, '[oldValue]', oldValue);
  6. }
  7. function handleDataSetChange({ record, name, value, oldValue }) {
  8. console.log('[dataset multiple]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
  9. }
  10. const data = [{
  11. user: [31],
  12. }];
  13. class App extends React.Component {
  14. ds = new DataSet({
  15. data,
  16. fields: [
  17. { name: 'size', type: 'number', label: '尺码', multiple: true, step: 1, max: 10, min: 5, required: true },
  18. ],
  19. events: {
  20. update: handleDataSetChange,
  21. },
  22. });
  23. render() {

API

NumberField

参数说明类型默认值
min最小值number
max最大值number
step步距number
nonStrictStep非严格步距,在非严格步距下,允许输入值不为步距的倍数加上最小值,也允许在设置整数步距的情况下输入小数booleanfalse
longPressPlus长按累加开关booleantrue

更多属性请参考 TextField

Static method

名称说明参数
format(value, lang, options)数字格式化value - 数值 lang - 语言代码 options - 详见Intl.NumberFormatOptions