我想使用材质UI的对话框。我正在使用另一个组件从右侧菜单(侧栏->用户注册)浏览该对话框。我只想在当前页面首页或关于我们的页面上打开该对话框。这是一个用户注册对话框。你能帮上忙吗?
[当我尝试打开用户注册对话框时,无法在当前页面中打开对话框,这就是为什么我为对话框组件创建了单独的组件的原因。
选择侧面菜单选项时,我想打开该对话框。该对话框应在当前页面中打开。
这是代码沙箱链接。 https://codesandbox.io/s/immutable-sound-ggj4w
App js
import React from "react";
import "./styles.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./home";
import About from "./about";
import Dialog from "./dialog";
import SideMenu from "./sidemu";
export default function App() {
return (
<div className="App">
<BrowserRouter>
<SideMenu />
{/* <Switch> */}
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/sidemenu" component={SideMenu} />
<Route exact path="/dialog" component={Dialog} />
{/* </Switch> */}
</BrowserRouter>
{/* <h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2> */}
</div>
);
}
家庭js
import React, { Component } from "react";
class Home extends Component {
render() {
return (
<div>
<div>Home</div>
</div>
);
}
}
export default Home;
关于我们
import React, { Component } from "react";
class Home extends Component {
render() {
return (
<div>
<div>about us</div>
</div>
);
}
}
export default Home;
dialog js
import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
export default function AlertDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={true}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
sidemenu js
import React from 'react';
import './styles.css';
import { Link } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import { List, ListItemIcon, ListItem, ListItemText } from '@material-ui/core';
import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
import MenuBookRoundedIcon from '@material-ui/icons/MenuBookRounded';
const useStyles = makeStyles({
list: {
width: 250,
},
fullList: {
width: 'auto',
},
});
export default function TemporaryDrawer() {
const classes = useStyles();
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false,
});
const toggleDrawer = (side, open) => event => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ ...state, [side]: open });
};
const sideList = side => (
<div
className={classes.list}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
<Link className="right-menu-data" to="/">
<ListItem button>
<ListItemIcon>
<HomeRoundedIcon />
</ListItemIcon>
<ListItemText>Home</ListItemText>
</ListItem>
</Link>
<Link className="right-menu-data" to="/about"><ListItem button>
<ListItemIcon>
<MenuBookRoundedIcon />
</ListItemIcon>
<ListItemText>About us</ListItemText>
</ListItem>
</Link>
<Link className="right-menu-data" to="/dialog"><ListItem button>
<ListItemIcon>
<MenuBookRoundedIcon />
</ListItemIcon>
<ListItemText>User Registration</ListItemText>
</ListItem>
</Link>
</List>
</div>
);
return (
<div>
<MenuRoundedIcon className="careerpedia-menu-bars" onClick={toggleDrawer('right', true)} />
<Drawer anchor="right" open={state.right} onClose={toggleDrawer('right', false)}>
{sideList('right')}
</Drawer>
</div>
);
}
一种方法实现此目的是要考虑将对话框组件中的模态打开/关闭到“中央”位置的逻辑,最好是在应用程序中,但在路由器外部。这允许通过可在应用程序周围传递的回调从单个位置打开/关闭对话框,并且未连接到任何特定路径您的应用程序处于打开状态。
代码的快速重构:
dialog.js
const AlertDialog = ({ open, onAgree, onClose, onDisagree }) => (
<Dialog
open={open}
onClose={onClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Use Google's location service?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onDisagree} color="primary">
Disagree
</Button>
<Button onClick={onAgree} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
);
App.js
export default function App() {
const [open, setOpen] = useState(false);
const openDialog = () => setOpen(true);
const closeDialog = () => setOpen(false);
const onAgreeHandler = () => {
closeDialog();
alert("AGREED");
};
const onDisgreeHandler = () => {
closeDialog();
alert("DISAGREED");
};
const onCloseHandler = (event, reason) => {
closeDialog();
alert(`Dialog closed. Reason: ${reason}`);
};
return (
<div className="App">
<BrowserRouter>
<SideMenu openDialog={openDialog} /> // Pass dialog open callback to sidemenu
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/dialog" component={Dialog} />
</BrowserRouter>
<Button variant="outlined" color="primary" onClick={openDialog}>
Open alert dialog test
</Button>
<Dialog
open={open}
onAgree={onAgreeHandler}
onClose={onCloseHandler}
onDisagree={onDisgreeHandler}
/>
</div>
);
}
sidemu.js
export default function TemporaryDrawer({ openDialog }) { // Accept openDialog callback
...
{ /* Add new menu list item (not in a Link!) */ }
<ListItem button onClick={openDialog}> // Set onClick handler to openDialog callback
<ListItemIcon>
<MenuBookRoundedIcon />
</ListItemIcon>
<ListItemText>Trigger dialog?</ListItemText>
</ListItem>
NOTE:随着您的应用程序大小/复杂度的增加,此模式可能会变得有些笨拙(如果您需要其他任何后代打开对话框),您可能希望切换为使用React上下文提供程序/ consumer专门用于对话框,或者使用状态管理系统(例如Redux),以便您可以分派简单的操作来打开/关闭它。