Saya mencoba menerapkan kotak centang untuk persetujuan penuh dari pendaftaran keanggotaan.

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>

  1. Jika Anda mengaktifkan syarat dan ketentuan penuh, semua kotak centang di bawah ini akan diaktifkan.
  2. Jika Anda menonaktifkan semua syarat dan ketentuan, semua kotak centang di bawah ini juga akan dinonaktifkan.
  3. Secara individual, semua kotak centang harus diaktifkan.
  4. Jika Anda mengaktifkan semua kotak centang secara individual, seluruh syarat dan ketentuan juga akan diaktifkan.
  5. Jika salah satu kotak centang di bawah ini dinonaktifkan, seluruh syarat dan ketentuan dinonaktifkan.
  6. Ketika seluruh syarat dan ketentuan diaktifkan, tombol pendaftaran anggota diaktifkan.

Saya mencoba beberapa metode, tetapi gagal mengaktifkan tombol. Bagaimana saya bisa mengimplementasikannya? Tolong bantu...

0
sunpl13 5 April 2021, 08:45

1 menjawab

Jika Anda tidak menginginkan / membutuhkan tombol yang terlihat sebelum menjadi aktif saya suka menggunakan && untuk tampilan. ex:

( isFlag1 && isFlag2 && isFlag3 && <button>Active Now</button>)
0
Jeffrey Storey 6 April 2021, 01:03