InputNumber 数字输入框

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

何时使用#

当需要获取标准数值时。

API#

属性如下

成员	说明	类型	默认值
min	最小值	Number	-Infinity
max	最大值	Number	Infinity
value	当前值	Number
step	每次改变步数，可以为小数	Number or String	1
defaultValue	初始值	Number
onChange	变化回调	Function
disabled	禁用	Boolean	false
size	输入框大小	String	无

代码演示

import { InputNumber } from 'antd';

function onChange(value) {
  console.log('changed', value);
}

ReactDOM.render(
<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
, mountNode);

基本

数字输入框。

import { InputNumber, Button } from 'antd';

const Test = React.createClass({
  getInitialState() {
    return {
      disabled: true
    };
  },
  toggle() {
    this.setState({
      disabled: !this.state.disabled
    });
  },
  render() {
    return (
      <div>
        <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
        <div style={{ marginTop: 20 }}>
          <Button onClick={this.toggle} type="primary">Toggle disabled</Button>
        </div>
      </div>
    );
  }
});

ReactDOM.render(<Test />, mountNode);

不可用

点击按钮切换可用状态。

import { InputNumber } from 'antd';

function onChange(value) {
  console.log('changed', value);
}

ReactDOM.render(
<div>
  <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
  <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
  <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
</div>
, mountNode);

.ant-input-number{
  margin-right: 10px;
}

三种大小

三种大小的数字输入框，当 size 分别为 large 和 small 时，输入框高度为 32px 和 22px ，默认高度为 28px

import { InputNumber } from 'antd';

function onChange(value) {
  console.log('changed', value);
}

ReactDOM.render(
<InputNumber min={1} max={10} step={0.1} onChange={onChange} />
, mountNode);

小数

和原生的数字输入框一样，value 的精度由 step 的小数位数决定。