InputNumber 数字输入框

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

何时使用

当需要获取标准数值时。

API

属性如下

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

组件演示

var InputNumber = antd.InputNumber;

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

React.render(
<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
, document.getElementById('components-input-number-demo-basic'));

数字输入框

var InputNumber = antd.InputNumber;

var 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} className="ant-btn ant-btn-primary">Toggle disabled</button>
      </div>
    </div>;
  }
});

React.render(<Test />, document.getElementById('components-input-number-demo-disabled'));

点击按钮切换可用状态。

var InputNumber = antd.InputNumber;

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

React.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>
, document.getElementById('components-input-number-demo-size'));
.ant-input-number{
  margin-right: 10px;
}

三种大小的数字输入框,当 size 分别为 largesmall 时,输入框高度为 32px22px ,默认高度为 28px