react实现复选框全选和反选组件效果
本文实例为大家分享了react实现复选框全选和反选组件的具体代码，供大家参考，具体内容如下
运行效果图如下：
代码：
importReact,{Component}from'react';
import{withRouter}from'react-router-dom';
//importMenufrom'../menu/Menu.jsx';
classListextendsComponent{
constructor(){
super();
this.state={
title:'我是List的标题',
content:'我是内容部分部分',
chooseAll:false,//全选标志
inters:['bsball','ymball','fbball'],//页面加载默认选中项
intersAll:['bsball','ymball','ppball','fbball'],
fchoose:false//正反选标志
};
}
//全选
chooseAll(event){
let{checked,value}=event.target;
letchooseAll=this.state.inters.length===4?true:false;
letinters=['bsball','ymball','ppball','fbball'];
checked?(
this.setState({
inters,
chooseAll:checked
})
):(
this.setState({
inters:[],
chooseAll:checked
})
);
}
//点击复选框
chooseInter(event){
letval=event.target.value;
letchecked=event.target.checked;
let{inters}=this.state;
//event.stopPropagation();
//选中复选框并且值不在数组里面
if(checked&&!this.state.inters.includes(val)){
inters.push(val);
}else{
//取消选中的选项
inters=inters.filter(v=>val!==v);
}
letchooseAll=inters.length===4?true:false;
console.log(inters);
this.setState({
inters,
chooseAll
});
}
//反选处理
fchooseHandle(event){
let{checked,value}=event.target;
let{inters,intersAll}=this.state;
letchooseAll=this.state.inters.length===4?true:false;
letarr=[];//反选结果
this.setState({
fchoose:checked,
chooseAll
});
intersAll.forEach(item=>{
if(!inters.includes(item)){
arr.push(item);
}
});
this.setState({
inters:arr
});
}
componentWillMount(){
letchooseAll=this.state.inters.length===4?true:false;
this.setState({
chooseAll
});
}
render(){
return(
{/**/}
{this.state.title}
{this.state.content}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。