antd checkbox 默认选中

image.png

前言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}，鼠标点击都没有用

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

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

(完)

antd checkbox 默认选中_antd的CheckBox相关推荐

antd checkbox 默认选中_antd + select 默认选中问题？
题目描述 react + antd select 默认选中问题题目来源及自己的思路我是通过 const { getFieldDecorator } = this.props.form;来设置他们的 ...
antd checkbox 默认选中_antd 开发的一些坑（一）
使用antd以来,有些东西总是现用现查,现总结一波,以提升开发效率一:表格下钻及默认展开一级 {treeData && treeData.length > 0 ? (<T ...
layui table勾选框的修改_Layui默认选中table的CheckBox复选框方法_飛雲_前端开发者...
方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , ...
vue checkbox 默认选中
<div class="form-group" id="rolelist"><div class="col-xs-12"& ...
jq判断 checkbox 是否选中以及设置checkbox选中
jquery判断checked的三种方法: .attr('checked) ; //看版本1.6+返回:"checked"或"undefined" ;1.5- ...
GridView中如何实现checkbox 默认选中
在 RowDataBound事件中 if(e.Row.RowType==DataControlRowType.DataRow) { checkbox chk=(checkbox)e.row.fin ...
antd radio设置默认选中_antd中如何给绑定Form的Radio.Group设置默认的选中值！
嗯~~ 本人2年前端小菜鸡,刚刚换了新公司,接手的项目使用的是react+antd+dva+umi等技术. 之前完全没有antd的经验,但是有2年react的经验,所以嘛,项目上手难度一般,但是扛不住 ...
jquery判断checkbox是否选中及改变checkbox状态
2019独角兽企业重金招聘Python工程师标准>>> jquery判断checked的三种方法: .attr('checked): //看版本1.6+返回:"chec ...
html 选中状态,html默认选中状态
html中标签用法解析及如何设置selec标签定义和用法 select 元素可创建单选或多选菜单.当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在 ...
radio默认选中并显示相应信息 php,php实现select、radio、checkbox默认选择示例
下面为大家带来一篇 php实现select.radio.checkbox默认选择示例.下面就为你详细讲解一下,希望对您的学习PHP有所帮助. 这是扩展yibing的select默认选择的实现方法 va ...

antd checkbox 默认选中_antd的CheckBox

antd checkbox 默认选中_antd的CheckBox相关推荐

最新文章

热门文章