僅允許輸入標(biāo)準(zhǔn)的數(shù)字值，可定義范圍

基礎(chǔ)用法

要使用它，只需要在InputNumber元素中使用value綁定變量即可，defaultValue為默認(rèn)值。

constructor(props) {
  super(props);


  this.state = {
    value: 0
  }
}


onChange(value) {


}


render() {
  return (
    <InputNumber defaultValue={this.state.value} onChange={this.onChange.bind(this)} min="1" max="10"></InputNumber>
  )
}

禁用狀態(tài)

disabled屬性接受一個(gè)Boolean，設(shè)置為true即可禁用整個(gè)組件，如果你只需要控制數(shù)值在某一范圍內(nèi)，可以設(shè)置min屬性和max屬性，不設(shè)置min和max時(shí)，最小值為 0。

constructor(props) {
  super(props);


  this.state = {
    value: 1
  }
}


onChange(value) {


}


render() {
  return (
    <InputNumber defaultValue={this.state.value} onChange={this.onChange.bind(this)} disabled={true}></InputNumber>
  )
}

步數(shù)

允許定義遞增遞減的步數(shù)控制

設(shè)置step屬性可以控制步長，接受一個(gè)Number。

constructor(props) {
  super(props);


  this.state = {
    value: 5
  }
}


onChange(value) {


}


render() {
  return (
    <InputNumber defaultValue={this.state.value} onChange={this.onChange.bind(this)} step="2"></InputNumber>
  )
}

尺寸

額外提供了 large、small 兩種尺寸的數(shù)字輸入框

constructor(props) {
  super(props);


  this.state = {
    num4: 1,
    num5: 1,
    num6: 1
  }
}


render() {
  return (
    <div>
      <InputNumber size="large" defaultValue={this.state.num4}></InputNumber>
      <InputNumber defaultValue={this.state.num5}></InputNumber>
      <InputNumber size="small" defaultValue={this.state.num6}></InputNumber>
    </div>
  )
}

Attributes

Events