如何在 React 中使用多材质 ui 对话框？

Question

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

\n

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

\n

有谁知道如何解决吗？

\n

应用程序.js

\n

  const App = () => {\n\n    const [open, setOpen] = useState(false);\n    \n    const handleClickOpen = () => {\n      setOpen(true);\n    };\n  \n    const handleClose = () => {\n      setOpen(false);\n    };\n\n\n    return (\n      <div>\n        <Top handleClickOpen={handleClickOpen}/>\n        <SignupModal open={open} handleClose={handleClose} />\n        <LoginModal open={open} handleClose={handleClose} />\n      </div>\n    )\n

\n

Top.js

\n

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

\n

SignupModal.js

\n

const SignupModal = (props) => {\n  return (\n    <div>\n      <Dialog\n        open={props.open}\n        onClose={props.handleClose}\n        aria-labelledby="alert-dialog-title"\n        aria-describedby="alert-dialog-description"\n      >\n        <DialogTitle id="alert-dialog-title"\xe3\x80\x80className={classes.title}>Sign up</DialogTitle>\n        <DialogContent className={classes.content}>\n            <div className={classes.text}> \n                <TextField id="standard-basic" label=\xe2\x80\x9cname\xe2\x80\x9d fullWidth/>\n                <TextField id="standard-basic" label=\xe2\x80\x9cemail\xe2\x80\x9d fullWidth/>\n                <TextField id="standard-basic" label=\xe2\x80\x9cpassword\xe2\x80\x9d fullWidth/>\n                <TextField id="standard-basic" label=\xe2\x80\x9cpass\xe2\x80\x9dword fullWidth/>\n            </div>\n        </DialogContent>\n        <p className={classes.toLogin}>to Login</p>\n        <DialogActions>\n          <Button onClick={props.handleClose} className={classes.signUpButton}>\n            Send\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </div>\n  );\n}\n\n

\n

登录模态.ls

\n

const LoginModal = (props) => {\n  return (\n    <div>\n      <Dialog\n        open={props.open}\n        onClose={props.handleClose}\n        aria-labelledby="alert-dialog-title"\n        aria-describedby="alert-dialog-description"\n      >\n        <DialogTitle id="alert-dialog-title"\xe3\x80\x80className={classes.title}>Login</DialogTitle>\n        <DialogContent className={classes.content}>\n            <div className={classes.text}> \n                <TextField id="standard-basic" label=\xe2\x80\x9cname\xe2\x80\x9d fullWidth/>\n                <TextField id="standard-basic" label=\xe2\x80\x9cpass\xe2\x80\x9dword fullWidth}/>\n            </div>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={props.handleClose} className={classes.signUpButton}>\n            Login\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </div>\n  );\n}\nexport default LoginModal\n\n\n

\n

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>
  );
};