React 实现人员列表多选、全选与取消全选功能

如图要实现的功能要求为：

点击选择按钮，页面弹出抽屉的方式显示人员信息。

人员信息选中时候，将人员信息显示在人员列表中。人员信息取消选中时候，人员信息不可显示在人员列表中。

人员信息全部选中时，表头中的人员姓名前面的checkbox显示为选中状态，并将人员信息显示在人员列表中。人员信息全部取消选中时，表头中的人员姓名前面的checkbox显示为取消选中状态，并将人员信息不显示在人员列表中。

点击翻页，加载相关对应页码的人员信息数据。如果存在被选中的人员信息，则checkbox为选中状态。当存在人员信息全部选中时表头中的人员姓名前面的checkbox为选中状态。

第一步：定义数据state项

javascript 复制代码

定义state数据项目
//用来控制抽屉开关
const [isShows,setisShows]=useState(false);
//用来人员信息存储
const [xingmingList,setxingmingList]=useState([]);
//用来表示表头中是否全部选中状态 
const [isCheckAll,setisCheckAll]=useState(false);
//人员列表
const [addmanList,setaddmanList]=useState([]);

第二步：选择人员部分结构、模拟数据

javascript 复制代码

<div className="x">
   <div className="x_left">
    <Checkbox onChange={onCheckAllChange} checked={isCheckAll}></Checkbox>
    <div className="x_left_name">人员姓名</div>
   </div>
   <Divider type="vertical" style={{h:20,:1,backgroundColor:'#efefef',opacity:0.5}}/>
   <div className="x_right">部门</div>
</div>

<div  className="y">
{
 xingmingList.map((i,inidex)=>{
   return (
     <div className="y_item" key={i.id}>
       <div className="y_item_left">
         <Checkbox onChange={(e)=>onCheckChange(e,i)} checked={item.checked}></Checkbox>
         <div className="y_item_left_name">{i.name}</div>
       </div>
       <div className="y_item_right">{i.department}</div>
     </div>
    )
  })
}
</div>

//模拟初始化数据
let xingminglist=[
   {
     id:'pichangshan',name:'皮常山',
     department:'周口-许昌-平顶山',
     tel:'13112345678',checked:false
   },
   {
     id:'xieguangkun',name:'谢广坤',
     department:'智慧燃气部',
     tel:'15112345678',checked:false
   },
   {
    id:'wanglaoqi',name:'王老七',
    department:'综合管理部',
    tel:'18112345678',checked:false
   },
   {
    id:'liuneng',name:'刘能',
    department:'财务管理部',
    tel:'13612345678',checked:false
   },
   {
    id:'zhaosi',name:'赵四',
    department:'安全生产中心,数智科技中心',
    tel:'13812345678',checked:false
   }
]

第三步：打开抽屉和关闭抽屉

javascript 复制代码

function handleShowDraws(){
    setisShows(true);
    setisCheckAll(false);
    let xingminglist1=[
        {
         id:'pichangshan',name:'皮常山',
         department:'周口-许昌-平顶山项目组',tel:'13112345678',checked:false
        },
        {
         id:'xieguangkun',name:'谢广坤',
         department:'智慧燃气部',tel:'15112345678',checked:false
        },
        {
         id:'wanglaoqi',name:'王老七',
         department:'综合管理部',tel:'18112345678',checked:false
        },
        {
         id:'liuneng',name:'刘能',
         department:'财务管理部',tel:'13612345678',checked:false
        },
        {
         id:'zhaosi',name:'赵四',
         department:'安全生产中心,数智科技中心',tel:'13812345678',checked:false
        }
      ]
      let num=0;
      let addmanlist=addmanList;
      xingminglist1.forEach(item => {
        let matched = addmanlist.find(obj => obj.id === item.id);
        if (matched){
          item.checked=true;
          num+=1;
        }        
      });
      if(num==xingminglist1.length){
        setisCheckAll(true)
      }
      setxingmingList(xingminglist1);
      setcurrents(1);
  }
 
  function onDrawerCloses(){
    setisShows(false);
    setaddmanList([]);
    setisCheckAll(false);
  }

第四步：多选方法

javascript 复制代码

  function onCheckChange(e,item){
    let ischecked=e.target.checked;
    let selectId=item.id;
    let num=0;
    let xingminglist=xingmingList;
    xingminglist.map((item,index)=>{
      if(item.id==selectId){
        item.checked=ischecked;
        if(item.checked==true){
          setaddmanList(prev=>[...prev,item]);
        }else{
          let array=addmanList.filter(i=>i.id!==selectId);
          setaddmanList([...array]);
        }
      }
    })
    setxingmingList([...xingminglist]);
    xingminglist.map((item,index)=>{
      if(item.checked==true){
        num+=1;
      }
    })
    if(num==xingminglist.length){
      setisCheckAll(true);
    }else{
      setisCheckAll(false);
    }    
  };

第五步：全选方法

javascript 复制代码

  function onCheckAllChange(e){
    let ischecked=e.target.checked;
    setisCheckAll(ischecked);
    let addmanlist=addmanList;
    let xingminglist=xingmingList;
    xingminglist.map((item,index)=>{
      item.checked=ischecked;
    })
    if(ischecked==true){
      let array = [...new Set([...xingminglist,...addmanlist].map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
      setaddmanList(array);
    }else{
      let array = addmanlist.filter(itemA => !xingminglist.some(itemB => itemA.id === itemB.id));
      setaddmanList(array);
    }

  };

第六步：翻页

javascript 复制代码

function handleChangePages(page){
    setcurrents(page);
    if(page==1){
      setisCheckAll(false)
      let xingminglist1=[
        {id:'pichangshan',name:'皮常山',
         department:'周口-许昌-平顶山项目组',tel:'13112345678',checked:false
        },
        {id:'xieguangkun',name:'谢广坤',
         department:'智慧燃气部',tel:'15112345678',checked:false
        },
        {id:'wanglaoqi',name:'王老七',
         department:'综合管理部',tel:'18112345678',checked:false
        },
        {id:'liuneng',name:'刘能',
         department:'财务管理部',tel:'13612345678',checked:false
        },
        {id:'zhaosi',name:'赵四',
         department:'安全生产中心,数智科技中心',tel:'13812345678',checked:false
        }
      ]
      let num=0;
      let addmanlist=addmanList;
      xingminglist1.forEach(item => {
        let matched = addmanlist.find(obj => obj.id === item.id);
        if (matched){
          item.checked=true;
          num+=1;
        }        
      });
      if(num==xingminglist1.length){
        setisCheckAll(true);
      }
      setxingmingList(xingminglist1);
    }
    if(page==2){
      setisCheckAll(false)
      let xingminglist2=[
          { id:'songxiaofeng',name:'宋晓锋',
            department:'周口-许昌-平顶山项目组',tel:'131123456788',checked:false
          },
          { id:'xieyongqiang',name:'谢永强',
            department:'智慧燃气部',tel:'15112345678',checked:false
          },
          { id:'zhaoyutian',name:'赵玉田',
            department:'综合管理部',tel:'18112345678',checked:false
          },
          { id:'wangtianlai',name:'王天来',
            department:'财务管理部',tel:'13612345678',checked:false
          },
          { id:'lidaguo',name:'李大国',
            department:'安全生产中心,数智科技中心',tel:'13812345678',checked:false
          }
      ]
      let num=0;
      let addmanlist=addmanList;
      xingminglist2.forEach(item => {
        let matched = addmanlist.find(obj => obj.id === item.id);
        if (matched){
          item.checked=true;
          num+=1;
        }
      });
      if(num==xingminglist2.length){
          setisCheckAll(true)
      }
      setxingmingList(xingminglist2);      
    }
  }

第七步：点击确认或取消

javascript 复制代码

  function xinjianbaocun2(){
    setisShows(false);
  }

  function xinjianquxiao2(){
    setisShows(false);
    setaddmanList([]);
    setisCheckAll(false);
  }