实现通讯录人员选择

 

 第一部分：创建一个通讯录列表

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}]useEffect(() => {setxingmingList(xingminglist);}, []);

第二部分：实现HTML部分

<div  className="alarmNotice2_draw_top_body_list">{xingmingList.map((item,index)=>{return (<div className="alarmNotice2_draw_top_body_list_item" key={item.id}><div className="alarmNotice2_draw_top_body_list_item_left"><Checkbox  onChange={(e)=>onCheckChange(e,item)} ></Checkbox><div className="alarmNotice2_draw_top_body_list_item_left_name">{item.name}</div></div><div className="alarmNotice2_draw_top_body_list_item_right">{item.department}</div></div>)})}</div>

第三部分：实现JS部分

function onCheckChange(e,item){let trueOrfalse=e.target.checked;// let exists=addmanList.some(i => isEqual(i, item));let exists=addmanList.some(i => i.id=== item.id);if(trueOrfalse==true){setaddmanList(prev=>[...prev,item])}else{if(exists==true){let newaddmanList = addmanList.filter(i => i.id !== item.id);setaddmanList(newaddmanList)}}};

第四部分：拆解

some方法：测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回一个布尔值。
let exists=addmanList.some(i => i.id=== item.id);isEqual方法：如果你需要比较对象的内容而不是引用，考虑实现一个自定义的比较函数或者使用一个库如 Lodash 的 isEqual 方法。
let exists=addmanList.some(i => isEqual(i, item));