reactjs數限制檢查

我想限制可以由用戶進行檢查，以4reactjs數限制檢查

我發現這樣做，在jQuery的，要弄清楚如何相同的行爲中可以實現的複選框數reactsjs

var limit = 3; 
$('input.single-checkbox').on('change', function(evt) { 
    if($(this).siblings(':checked').length >= limit) { 
    this.checked = false; 
} 
});

來源

2017-06-14 asdfdefsad

你可以試試這個 -

上constructor添加state保持selectedDataList：

constructor(props) { 
    super(props); 
    this.state = { 
     currentData: [], 
     limit: 3 
    }  
}

綁定輸入功能onChange：

<input 
    type="checkbox" 
    checked={this.state.currentData.indexOf(id)>=0} 
    onChange={this.selectData.bind(this,id)} 
    name="select-data"/>

關於綁定功能，請進行計數：

selectData(id, event){ 
    let isSelected = event.currentTarget.checked; 
    if(isSelected){ 
     if(this.state.currentData.length<this.state.limit){ 
      this.setState({currentData : [...currentData, id]}) 
     } 
    } 
    else{ 
     this.setState({currentData : 
     this.state.currentData.filter((item)=>id!==item)}) 
    } 
}

來源

2017-06-14 08:47:30

總之，你必須做出Checkbox爲控制組件，並存儲在組件checked statestate對象。然後，您可以使用它來查找是否檢查了多個n，並防止其他值發生更改。

在組件創建的狀態來存儲值

this.state = { 
checkState: [false, false, false] 
}

或動態設置checkState值的數量根據您的需要。

使用從狀態中獲取的值創建類似這樣的複選框。這裏i代表當前的複選框。

<input 
    name="isGoing" 
    type="checkbox" 
    checked={this.state.checkState[i]} 
    onChange={this.handleInputChange} />

在handleInputChange輸入，檢查狀態已經true值的數量。如果超過您的要求，請不要更新狀態。如果小於，則將checkState中的i th元素更新爲onChange方法中的值。

handleInputChange = (val) => { 
// check for the current state values 
// if `canSave` then update using 
// this.setState({}) 
// else skip updating state.

}

來源

2017-06-14 08:45:31 Panther

reactjs數限制檢查

回答

相關問題