版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
版权
功能描述
全选的功能应该大家都知道
以月份举例,点击全选,所有月份都被选择,再次点击全选,所有月份被取消选择;当所有月份都选上时,全选按钮会自动被勾选上,当月份不被全选时,全选按钮会不被勾选。
在此之前,全选的checkbox和月份的checkbox无任何关系
实现过程自己遇到的难点:
不知道该如何操控每个月份的checked属性,如何实现点击全选,操控所有月份checked = true
解决思路:
在月份数组给每个月份都设置单独的checked属性值操控
详情看代码
一、从后台拿到checkboxitem数组
(此处自己手写一个数组来假设使用)
const data=[{ value:1, label:'一月'},{ value:2, label:'二月'},{ value:3, label:'三月'},{ value:4, label:'四月'},{ value:5, label:'五月'},{ value:6, label:'六月'},{ value:7, label:'七月'},{ value:8, label:'八月'},{ value:9, label:'九月'},{ value:10, label:'十月'},{ value:11, label:'十一月'},{ value:12, label:'十二月'},];
二、添加state数据
this.state={ month:[],//保存所有选中的月份 isAllChecked:false,//全选按钮 allMonth:[]//添加了月份单独checked属性的数组};
三、添加给每个月份添加checked属性的数组allMonth
componentDidMount(){const arr= data; arr.map(item=>{ item.checked=false;})this.setState({ allMonth:arr})}
最后设置的allMonth数组是这样的,可以清楚看到,每个月份都有了一个单独的checked属性
注:但是此处会有一个缺陷
因为后台