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

2020-10-16 13:43 更新

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

基礎(chǔ)用法

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

  1. constructor(props) {
  2. super(props);
  3. this.state = {
  4. value: 0
  5. }
  6. }
  7. onChange(value) {
  8. }
  9. render() {
  10. return (
  11. <InputNumber defaultValue={this.state.value} onChange={this.onChange.bind(this)} min="1" max="10"></InputNumber>
  12. )
  13. }

禁用狀態(tài)

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

  1. constructor(props) {
  2. super(props);
  3. this.state = {
  4. value: 1
  5. }
  6. }
  7. onChange(value) {
  8. }
  9. render() {
  10. return (
  11. <InputNumber defaultValue={this.state.value} onChange={this.onChange.bind(this)} disabled={true}></InputNumber>
  12. )
  13. }

步數(shù)

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

設(shè)置step屬性可以控制步長(zhǎng),接受一個(gè)Number

  1. constructor(props) {
  2. super(props);
  3. this.state = {
  4. value: 5
  5. }
  6. }
  7. onChange(value) {
  8. }
  9. render() {
  10. return (
  11. <InputNumber defaultValue={this.state.value} onChange={this.onChange.bind(this)} step="2"></InputNumber>
  12. )
  13. }

尺寸

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

  1. constructor(props) {
  2. super(props);
  3. this.state = {
  4. num4: 1,
  5. num5: 1,
  6. num6: 1
  7. }
  8. }
  9. render() {
  10. return (
  11. <div>
  12. <InputNumber size="large" defaultValue={this.state.num4}></InputNumber>
  13. <InputNumber defaultValue={this.state.num5}></InputNumber>
  14. <InputNumber size="small" defaultValue={this.state.num6}></InputNumber>
  15. </div>
  16. )
  17. }

Attributes

參數(shù) 說(shuō)明 類(lèi)型 可選值 默認(rèn)值
defaultValue 默認(rèn)值 number
value 綁定值 number
min 設(shè)置計(jì)數(shù)器允許的最小值 number 0
max 設(shè)置計(jì)數(shù)器允許的最大值 number Infinity
step 計(jì)數(shù)器步長(zhǎng) number 1
size 計(jì)數(shù)器尺寸 string large, small
disabled 是否禁用計(jì)數(shù)器 boolean false
controls 是否使用控制按鈕 boolean true

Events

事件名稱(chēng) 說(shuō)明 回調(diào)參數(shù)
onChange 綁定值被改變時(shí)觸發(fā) 最后變更的值
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)