实现通讯录人员选择

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

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));