reactjs限制检查的复选框数量答案

【问题标题】：reactjs Limit number of checkboxes checkedreactjs限制检查的复选框数量
【发布时间】：2019-06-25 23:34:57
【问题描述】：

我想将用户可以选中的复选框数量限制为 4 个。

我在 jquery 中找到了这样做的方法，想弄清楚如何在 reactsjs 中实现相同的行为

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

【问题讨论】：

标签： html reactjs

【解决方案1】：

简而言之，您必须将Checkbox 设为受控组件，并将checked state 存储在组件state 对象中。然后您可以使用它来查找是否检查了超过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 中的ith 元素更新为onChange 方法中的值。

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

【讨论】：

【解决方案2】：

你可以试试这个-

在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)})
     }
}

【讨论】：