如何在 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

这就是为什么你在两个模式上共享状态。

解法很简单，有2种状态；一个将确定 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>
  );
};

如何在 React 中使用多个 material ui 对话框？

How to use multiple material ui dialog with React?

javascript

dialog

reactjs

material-ui