NumberField 数字输入框

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