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를 사옹해서 전체선택을 끊어주엇다.