Element-React Input Number 計數(shù)器

僅允許輸入標準的數(shù)字值，可定義范圍

基礎用法

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

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屬性接受一個Boolean，設置為true即可禁用整個組件，如果你只需要控制數(shù)值在某一范圍內(nèi)，可以設置min屬性和max屬性，不設置min和max時，最小值為 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ù)控制

設置step屬性可以控制步長，接受一個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