如何在反应中从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 值有条件地呈现登录和注册模式。