react 체크 박스 선택 및 해제 구현

Question

아래와 같이 필수 / 선택 동의를 구분하여 일괄적으로 체크박스를 선택 해제를 구현하고 싶습니다.체크박스를 선택했고 배열에 목록이 들어갔는데도 form의 상태값이false에서 true로 값이 변하지 않습니다. 무엇이 문제일까요? // form 상태값 const [form, setForm] = useState({ ... // 동의 항목 체크 박스 isOverFourTeen : false, //필수 isAgreedServiceTerm : false, //필수 isAgreedPersonalInfo : false, //필수 isAgreedEcommerce : false, //필수 isAgreedMarketingAlarm : false, isAgreedNightPushAlarm : false, }) // 필수 동의 체크박스 유효성 체크 통과 여부 const [isValid, setValid] = useState({ ... isOverFourTeen : false, isAgreedServiceTerm : false, isAgreedPersonalInfo : false, isAgreedEcommerce : false, }) // 체크박스 선택 및 해제 type checkListType = string[]; const [checkList, setCheckList] = useState([]); const handleCheck = (e : React.ChangeEvent) => { setForm({...form, [e.target.name] : e.target.checked}) e.target.checked ? setCheckList([...checkList, e.target.name]): setCheckList(checkList.filter(el=> el !== e.target.name)) } // 필수 동의 체크 박스 선택 / 해제 const handlecheckRequired = (e : React.ChangeEvent) => { if(e.target.checked) { setCheckList(['isOverFourTeen','isAgreedServiceTerm','isAgreedPersonalInfo','isAgreedEcommerce']) setValid({...isValid, isOverFourTeen : true, isAgreedServiceTerm : true, isAgreedPersonalInfo : true, isAgreedEcommerce : true}) } else{ setCheckList([]); setValid({...isValid, isOverFourTeen : false, isAgreedServiceTerm : false, isAgreedPersonalInfo : false, isAgreedEcommerce : false}) } }; return(

필수동의 항목 및 개인정보 수집 및 이용 동의(선택), 광고성 정보 수신 동의 (선택)에 일괄 동의 합니다.

(필수) 만 14세 이상 입니다.

(필수) 서비스 이용약관에 동의합니다.

(필수) 개인정보 수집이용에 동의합니다.

(필수) 전자상거래 이용약관에 동의합니다.

)체크박스 선택시(checkList 배열 값)체크박스 해제시콘솔 상태값 변화 없음 체크박스 컴포넌트 입니다.export const CheckBox = styled.input.attrs(()=>({ type : 'checkbox' }) )` display : inline-flex; border: 1.5px solid gray; border-radius: 12px; width : 24px; height : 24px; `

codezzzz · Answer

CheckBox 컴포넌트 볼수있을까요?

react 체크 박스 선택 및 해제 구현

1개의 답변

Q&A 목록