React checkbox and button control - html

Question

I am trying to implement a check box for the full consent of membership registration.
const [agree1, setAgree1] = useState(false); //agree1
const [agree2, setAgree2] = useState(false); //agree2
const [agree3, setAgree3] = useState(false); //agree3
const [total, settotal] = useState(false); // all agree
const buttonState = useCallback(() => {
if((agree1===true)&&(agree2===true)&&(agree3===true)){
settotal(true);
setDisabled('');
}
else {
setDisabled('disabled');
}
},[agree1,agree2,agree3,total]);
const totalchange = () => {
if(total ===true) { //전체동의가 true라면 다시 클릭 했을때 전부 unchecked
settotal(!total);
setAgree1(!agree1);
setAgree2(!agree2);
setAgree3(!agree3);
} else{ //그외(하나만 체크되 있거나 아무것도 없다면) 전부 checked로 만듬
settotal(true);
setAgree1(true);
setAgree2(true);
setAgree3(true);
// setDisabled('');
}
}
<div>
<div>
<input type="checkbox" name="total_agree" value="total_agree" checked={total} onChange={totalchange} />
<label>전체 동의</label>
</div>
<div>
<input type="checkbox" name="agree1" value="agree1" checked={agree1} onChange={changeState1} />
<label>회원 약관</label>
<span>전체보기</span>
</div>
<div>
<input type="checkbox" name="agree2" value="agree2" checked={agree2} onChange={changeState2} />
<label>개인정보 수집 및 이용</label>
<span>전체보기</span>
</div>
<div>
<input type="checkbox" name="agree3" value="agree3" checked={agree3} onChange={changeState3} />
<label>위치 정보 이용 동의</label>
<span>전체보기</span>
</div>
</div>
<br/>
입력해주신 이메일 정보는 회원가입 시 이메일로 설정됩니다.
<br/>
<div>
<label>이메일</label>
<input type = "email" onChange = {EmailHandler}/>
<button name="button" onClick = {clickFunction}>인증코드 발송</button>
</div>
If you activate the full terms and conditions, all the checkboxes below will be activated.
If you deactivate all terms and conditions, all the checkboxes below will also be deactivated.
Individually, all checkboxes should be enabled.
If you activate all checkboxes individually, the entire terms and conditions will also be activated.
If any of the checkboxes below are deactivated, the entire terms and conditions are deactivated.
When the entire terms and conditions are activated, the member sign-up button is activated.
I tried several methods, but failed to activate the button.
How can I implement it?
Please help...

Answer 1

Essentially what you need to do here is remove the states for total and disabled as they can be derived from the state of the other checkboxes.
The checkbox for "total" is checked if and only if all three are checked. When it is checked or unchecked, we handle that by setting the state of the other three.
Code Sandbox Demo
const Form = ({ onSubmit }) => {
const [agree1, setAgree1] = useState(false);
const [agree2, setAgree2] = useState(false);
const [agree3, setAgree3] = useState(false);
const isAgreedAll = agree1 && agree2 && agree3;
const handleCheckAll = (e) => {
setAgree1(e.target.checked);
setAgree2(e.target.checked);
setAgree3(e.target.checked);
};
const [email, setEmail] = useState("");
// placeholder so that you can implement your own validation
const emailLooksValid = email.length > 5;
const isDisabled = !isAgreedAll || !emailLooksValid;
return (
<>
<div>
<div>
<input
type="checkbox"
name="total_agree"
value="total_agree"
checked={isAgreedAll}
onChange={handleCheckAll}
/>
<label>전체 동의</label>
</div>
<div>
<input
type="checkbox"
name="agree1"
value="agree1"
checked={agree1}
onChange={(e) => setAgree1(e.target.checked)}
/>
<label>회원 약관</label>
<span>전체보기</span>
</div>
<div>
<input
type="checkbox"
name="agree2"
value="agree2"
checked={agree2}
onChange={(e) => setAgree2(e.target.checked)}
/>
<label>개인정보 수집 및 이용</label>
<span>전체보기</span>
</div>
<div>
<input
type="checkbox"
name="agree3"
value="agree3"
checked={agree3}
onChange={(e) => setAgree3(e.target.checked)}
/>
<label>위치 정보 이용 동의</label>
<span>전체보기</span>
</div>
</div>
<br />
입력해주신 이메일 정보는 회원가입 시 이메일로 설정됩니다.
<br />
<div>
<label>이메일</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button
disabled={isDisabled}
name="button"
onClick={onSubmit(email)}
>
인증코드 발송
</button>
</div>
</>
);
};
export default Form;
If you want to, you could combine some of the logic for the three checkboxes into a renderCheckbox function.

Answer 2

If you don't want/need button visible prior to being active I like to use && for display. ex:
( isFlag1 && isFlag2 && isFlag3 && <button>Active Now</button>)