antd的CheckBox

Posted 2021-04-24 webchen

前言0：首先安装immutable.js：npm install --save-g-dev immutable

前言1：为方便还原问题，代码能简写就简写。

问题：简洁版如图： 图1显示的是测试1的勾，但点击c、d，勾是打不上的,测试2依然，原因是view没有刷新

解决方法： 方法1：在每次点击勾时，触发checkbox的onChange，在该方法内，设置time，令view强制刷新：

 
   
   
 

  
    
    
  
this.setState({
  
    
    
  
      defaultRowCheck:newArr,
  
    
    
  
      time:new Date()})
 
   
   
 

第二种方法：将check转换为Immutable对象也可以解决

 
   
   
 

  
    
    
  
checkChange(item,e){
  
    
    
  
  let {defaultRowCheck}=this.state
  
    
    
  
//newArr已经是Immutable对象（使用fromJS()转化的）  
  
    
    
  
let newArr=defaultRowCheck
  
    
    
  
  let index=+(item.index)
  
    
    
  
  let value=item.value
  
    
    
  
 //list是index和value，map是key和value
  
    
    
  
    if(newArr.includes(value)){
  
    
    
  
//不能单单newArr.set(index,''),这样newArr没有赋新值
  
    
    
  
newArr=newArr.set(index,'')
  
    
    
  
//最后一定要更新状态
  
    
    
  
      this.setState({defaultRowCheck:newArr})
  
    
    
  
    }else{
  
    
    
  
      newArr=newArr.set(index,item.value)
  
    
    
  
      this.setState({defaultRowCheck:newArr})
  
    
    
  
    }
  
    
    
  
}
 
   
   
 

 
   
   
 

  
    
    
  
//incluedes(value),判断是否有该值
  
    
    
  
checked={defaultRowCheck.includes(item.value)}
 
   
   
 

繁琐版问题： 1.用checkbox的defaultChecked时，只能读取第一个渲染的勾，当点击第二个测试时，不能重新渲染，打钩,但可以点击修改勾 2.用checkbox的checked时，能动态更新不同item的勾，但点击无法消勾，但是单独用checked={str===“aaa”}，并在onChange中setState({str:xxx})是可以改变的，反而，我无论是用数组(起初是想用数组保存测试的所有功能)checked={arr.indexOf(str)>-1},来判断，还是checked={arr[i]===str}，鼠标点击都没有用

结语：这是困扰我两天的问题，被同事姐姐一句话解决了(；′⌒`)，即上面的两种解决方法。

就不还原问题代码了，好费时间。

（完）