NumberField数字输入框

数字输入框。

何时使用

需要输入普通数字的时候使用。

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

代码演示

基本使用

基本使用。

import { NumberField, Row, Col } from 'choerodon-ui/pro';
function log(value) {
  console.log(value);
}
ReactDOM.render(
  <div>
    <Row 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" onChange={log} step={1.1} min={-0.3} />
      </Col>
    </Row>
  </div>,
  mountNode
);

数据源

绑定数据源。

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 />,
  mountNode
);

范围

范围。

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',
        range: true,
        defaultValue: [0, 4],
        validator: rangeValidator,
      },
      { name: 'multipleNumber', type: 'number', range: true, multiple: true, required: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={24}>
          <NumberField
            dataSet={this.ds}
            name="number1"
            placeholder={['Range Start', 'Range End']}
          />
        </Col>
        <Col span={24}>
          <NumberField
            dataSet={this.ds}
            name="number2"
            placeholder={['Range Start', 'Range End']}
          />
        </Col>
        <Col span={24}>
          <NumberField
            range
            defaultValue={[0, 4]}
            placeholder={['Range Start', 'Range End']}
            onChange={handleChange}
          />
        </Col>
        <Col span={24}>
          <NumberField
            range={['start', 'end']}
            defaultValue={{ start: 0, end: 4 }}
            placeholder={['Range Start', 'Range End']}
            onChange={handleChange}
          />
        </Col>
        <Col span={24}>
          <NumberField dataSet={this.ds} name="multipleNumber" placeholder="Input Number" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

受控数字输入框

受控数字输入框

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} />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

最大最小值

指定最大最小值。

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>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

多值

通过属性multiple设置为多值。

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() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <NumberField dataSet={this.ds} name="size" placeholder="数据源多选" />
        </Col>
        <Col span={12}>
          <NumberField multiple onChange={handleChange} placeholder="多选" step={1} max={10} min={5} />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

API

NumberField

更多属性请参考 TextField。

static method