Question

我陷入了困境，需要禁用除选中的复选框之外的所有复选框。

该复选框是在API的帮助下动态创建的，密钥将传递给每个复选框。有没有一种方法可以达到上述要求。

谢谢

{this.state.imageinfo.map((image, key) => {
          return(
            <div key={key}>
              <input type="checkbox"
                onClick={(e)=> this.setCoverImage(e,key)}>Cover Image
              <div className="delete-image" onClick={() => this.removeImage(key)}>
                &times;
              </div>
            </div>
          );
        })
      }

Answer 1

您可以让该复选框更改状态保存的布尔值，并使所有其他属性的disabled属性等于该状态对象。

Answer 2

使用单选而不是复选框

复选框的行为是多项选择，而单选则不是

如果要使用复选框：

setCoverImage(e, key) {
    ...
    this.setState({active: key})
}
render() {
    ...
    <input type="checkbox"
            onClick={(e)=> this.setCoverImage(e,key)} checked={this.state.active === key}>

Answer 3

您需要在状态中设置的数组中设置一个布尔型选中关键字。每当调用函数时，它将仅在提供键的Array元素中设置checked关键字。数组中选中的关键字的其余部分将被删除。然后，您将在状态中设置“更新的数组”。这样。

setCoverImage=(key)=>{
const ItemKeyTobeChecked=key;
const imageinfoArray=this.state.imageinfo;

for(var i=0;i<imageinfoArray.length;i++){
 if(key===i){
  imageinforArray[key].checked=true;
 } 
 else{
   if(imageinforArray[i].checked){
    delete imageinforArray[i].checked
   }
 }
}
this.setState({
imageinfo:imageinfoArray
})
}

如果复选框已选中，则禁用其他；如果未选中，则启用所有反应

3 个答案: