javascript - 如何在 React 中使用多个 Material 的 ui 对话框？

Question

我想在注册页面和登录页面中使用两个对话框。我想要做的实现是点击首页上的注册按钮时显示注册屏幕，以及点击注册页面上的登录按钮时显示登录屏幕。

我在 App.js 上写了打开状态。但问题是当它用 App.js 编写时，两个模态打开..

有人知道怎么解决吗？

App.js

  const App = () => {

    const [open, setOpen] = useState(false);
    
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };


    return (
      <div>
        <Top handleClickOpen={handleClickOpen}/>
        <SignupModal open={open} handleClose={handleClose} />
        <LoginModal open={open} handleClose={handleClose} />
      </div>
    )

Top.js

const Top = (props) => {
    const classes = useStyles();

    return (
        <React.Fragment>
            <div style={style}>
            <Button variant="outlined" className={classes.loginButton} onClick={props.handleClickOpen}>
              Login
            </Button>
            </div>
            <h1>Toppage</h1>
        </React.Fragment>
    );
}

SignupModal.js

const SignupModal = (props) => {
  return (
    <div>
      <Dialog
        open={props.open}
        onClose={props.handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title"　className={classes.title}>Sign up</DialogTitle>
        <DialogContent className={classes.content}>
            <div className={classes.text}> 
                <TextField id="standard-basic" label=“name” fullWidth/>
                <TextField id="standard-basic" label=“email” fullWidth/>
                <TextField id="standard-basic" label=“password” fullWidth/>
                <TextField id="standard-basic" label=“pass”word fullWidth/>
            </div>
        </DialogContent>
        <p className={classes.toLogin}>to Login</p>
        <DialogActions>
          <Button onClick={props.handleClose} className={classes.signUpButton}>
            Send
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

LoginModal.ls

const LoginModal = (props) => {
  return (
    <div>
      <Dialog
        open={props.open}
        onClose={props.handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title"　className={classes.title}>Login</DialogTitle>
        <DialogContent className={classes.content}>
            <div className={classes.text}> 
                <TextField id="standard-basic" label=“name” fullWidth/>
                <TextField id="standard-basic" label=“pass”word fullWidth}/>
            </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={props.handleClose} className={classes.signUpButton}>
            Login
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}
export default LoginModal

Answer 1

您正在共享两个模态的状态，这就是原因。

解决方案很简单，有两种状态；一个将确定 SignupModal 是否打开，另一个用于 LoginModal。

const App = () => {
  const [openLogin, setOpenLogin] = useState(false);
  const [openSignup, setOpenSignup] = useState(false);

  return (
    <div>
      <Top
        onClickLogin={() => setOpenLogin(true)}
        onClickSignup={() => setOpenSignup(true)}
      />
      <SignupModal open={openLogin} handleClose={() => setOpenLogin(false)} />
      <LoginModal open={openSignup} handleClose={() => setOpenSignup(false)} />
    </div>
  );
};

const Top = (props) => {
  return (
    <React.Fragment>
      <div>
        <Button
          variant="outlined"
          className={classes.loginButton}
          onClick={props.onClickLogin}
        >
          Login
        </Button>
        <Button
          variant="outlined"
          className={classes.loginButton}
          onClick={props.onClickSignup}
        >
          Signup
        </Button>
      </div>
      <h1>Toppage</h1>
    </React.Fragment>
  );
};