Question

我想限制用户可以检查的复选框数量。

我找到了在jquery中做到这一点的方法，想知道如何在reactsjs中实现相同的行为

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

Answer 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值的数量。如果超出您的要求，请不要更新状态。如果少于那么将i中的checkState元素更新为onChange方法中的值。

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

}

Answer 2

你可以试试这个 -

在state上添加constructor以维护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)})
     }
}

reactjs限制选中的复选框数

2 个答案: