react

react 전체 선택/해제 구현

전주천둥새 2023. 5. 16. 13:53
// 체크박스 이벤트
  const [checkedList, setCheckedList] = useState([]);

  // 개별체크
  const checkedInputs =(checked, item)=>{
    if(checked){
      setCheckedList([...checkedList, item]);
    } else if (!checked) {
      setCheckedList(checkedList.filter(el => el !== item));
    };
  }

  // 전체체크
  const allCheck =(checked)=>{
    if(checked){
      const idArray =[];
      users.slice(offset, offset + cntPerPage).forEach((el) => idArray.push(el.userId));
      console.log(idArray);
      setCheckedList(idArray);
    }else{
      setCheckedList([]);
    }
  }
// 전체선택
<th style={{width:"5%"}}><input type={"checkbox"} id={'checkAll'} onChange={(e) => allCheck(e.target.checked)} checked={checkedList.length === users.slice(offset, offset + cntPerPage).length ? true : false}/></th>

//개별선택
<td><input type={"checkbox"} name={'checked'+index} id={user.userId} onChange={(e)=> {checkedInputs(e.target.checked, e.target.id)}} checked={checkedList.includes(user.userId) ? true : false}/></td>

>>> 테이블에서 보여주는 개수만큼 잘라주기위해 slice를 사옹해서 전체선택을 끊어주엇다.