如何在反應中從modal1的按鈕打開modal2

Question

我有兩種模式，一種是登錄模式，另一種是注冊模式現在我想通過單擊登錄模式中存在的按鈕打開注冊模式，我嘗試了許多不同的方法但無法實現，我也嘗試制作一個帶有 useReducer 的 signupModalSwitch 並通過進行不同的 function 調用，但它反對鈎子規則，我很新反應無法弄清楚如何去做。 提前致謝：）

模態1->

function LoginModal() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button
        onClick={handleOpen}
        variant="outlined"
        className={classNames(
          classes.textNeonGreen,
          classes.outlinedNeonGreen,
          classes.navButton
        )}
        classes={{ disabled: classes.disabled }}
      >
        <Typography noWrap>Login</Typography>
      </Button>
      <Modal
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <LoginCard LoginClose={handleClose} />
        </Fade>
      </Modal>
    </div>
  );
}

function LoginCard({ LoginClose }) {
  return (
    <Card className={classes.modalCard}>
      <span>
        <button
          onClick={LoginClose}
          type="button"
          className="close px-2 pt-2"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </span>
      <CardContent className={classes.modalCardContent}>
        <Typography variant="h4" className={classes.modalHeading}>
          <b>Login</b>
        </Typography>

        <Account>
          <Login />
        </Account>

        <div>
          <Grid
            container
            direction="column"
            justify="center"
            alignItems="center"
          >
            <p className="mb-2 mt-4 text-center">
              Don't have Account?
            </p>

//###### BY CLICKING THIS BUTTON I WANT TO OPEN MY SIGNUP MODAL #######//    

            <button
              className="btn btn-outline-success btn-block btn-md"
              onClick={() => {
                LoginClose();
                signupModalSwitch(null,{type:'open'})
              }
            }
            >
              Signup
            </button>
          </Grid>
        </div>
      </CardContent>
    </Card>
  );
}

模態2->

function signupModalSwitch(state, action){
  switch(action.type){
    case 'open':
      return { open: true }
    case 'close':
      return { open: false }
    default:
      console.log(action);  
  }
}

function SignupModal() {
  const classes = useStyles();

  const [state, dispatch] = useReducer(signupModalSwitch, { open: false })

  function handleOpen() {
    dispatch({type: "open"});
  }

  function handleClose() {
    dispatch({type: "close"});
  };

  return (
    <div>
      <Button
        onClick={handleOpen}
        variant="outlined"
        className={classNames(
          classes.textNeonGreen,
          classes.outlinedNeonGreen,
          classes.navButton
        )}
        classes={{ disabled: classes.disabled }}
      >
        <Typography noWrap>Signup</Typography>
      </Button>
      <Modal
        className={classes.modal}
        open={state.open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={state.open}>
          <SignupCard signupClose={handleClose} />
        </Fade>
      </Modal>
    </div>
  );
}

function SignupCard({ signupClose }) {
  return (
    <Card className={classes.modalCard}>
      <span>
        <button
          onClick={signupClose}
          type="button"
          className="close px-2 pt-2"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </span>
      <CardContent className={classes.modalCardContent}>
        <Typography variant="h4" className={classes.modalHeading}>
          <b>Signup</b>
        </Typography>

        <Signup />
        
      </CardContent>
    </Card>
  );
}

Answer 1

更好的方法是創建一個容器並將所有邏輯移動到容器中。 您的登錄和注冊模式應該是啞組件，即不要在這些組件中維護 state。

在您的容器中，保留兩個狀態，openLoginModal 和 openSignupModal。

 const [openLoginModal, setOpenLoginModal] = useState(false)
 const [openSignupModal, setOpenSignupModal] = useState(false)

您可以將這些作為道具傳遞給您的登錄和注冊組件。 當您單擊登錄模式中的按鈕時，您將需要一個關閉登錄模式並打開注冊模式的 function。 您也可以將其作為道具傳遞。

const onSignupButtonClick = () => {
   setOpenLoginModal(false)
   setOpenSignupModal(true)
}

您可以根據 state 值有條件地呈現登錄和注冊模式。