反应复选框和按钮控制

Question

我正在尝试实施一个复选框以完全同意会员注册。

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. 如果您激活完整的条款和条件，下面的所有复选框都会被激活。
2. 如果您停用所有条款和条件，下面的所有复选框也将被停用。
3. 单独来说，所有复选框都应启用。
4. 如果您单独激活所有复选框，则整个条款和条件也将被激活。
5. 如果以下任何复选框被禁用，则整个条款和条件都将被禁用。
6. 激活全部条款和条件后，会激活会员注册按钮。

我尝试了几种方法，但都无法激活按钮。 我该如何实施？ 请帮忙...

Answer 1

如果您不希望/不需要在激活之前显示按钮，我喜欢使用 && 进行显示。例如：

( isFlag1 && isFlag2 && isFlag3 && <button>Active Now</button>)

Answer 2

您在这里需要做的基本上是删除total 和disabled 的状态，因为它们可以从其他复选框的状态派生而来。

当且仅当所有三个都被选中时，才会选中“总计”复选框。当它被选中或未选中时，我们通过设置其他三个的状态来处理它。

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;

如果您愿意，可以将三个复选框的一些逻辑组合成一个renderCheckbox 函数。