帶有嵌套列表項的 React/Material UI 抽屜在單擊時關閉

Question

我正在將 Material-UI 用於我的 React 項目，並且在添加嵌套列表項時使抽屜無法正常運行時遇到問題。 在我添加這些之前，一切都很好。我相信根本原因是通過單擊下拉菜單並將列表項的狀態更改為打開，我導致應用程序重新呈現。 不知道如何解決這個問題。

問題：當您單擊頂層時，嵌套列表項會自動關閉抽屜。 然后用戶必須再次打開抽屜才能看到下拉列表中的項目。

所需功能：用戶單擊菜單項以打開抽屜。 用戶可以點擊“Leadership Triad”並在抽屜保持打開狀態時查看其中的菜單項。 當用戶點擊關閉時，抽屜關閉。

代碼沙箱https://codesandbox.io/s/material-ui-nested-menu-forked-qqdiv

我的代碼

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import Divider from "@material-ui/core/Divider";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import HomeIcon from "@material-ui/icons/Home";
import AccountCircle from "@material-ui/icons/AccountCircle";
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import PeopleIcon from "@material-ui/icons/People";
import BusinessIcon from "@material-ui/icons/Business";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { Link as RouterLink } from "react-router-dom";
import Collapse from "@material-ui/core/Collapse";

const useStyles = makeStyles(theme => ({
    root: { flexGrow: 1 },
    menuButton: { marginRight: theme.spacing(2) },
    title: { flexGrow: 1 },
    list: { width: 250 },
    nested: { paddingLeft: theme.spacing(4) },
}));

const Header = () => {
    const [drawerOpen, setDrawerOpen] = useState(false);
    const [anchorEl, setAnchorEl] = useState(null);

    const [leadershipTriadMenuOpen, setLeadershipTriadMenuOpen] = useState(false);

    const handleLeadershipTriadClick = () => {
        setLeadershipTriadMenuOpen(!leadershipTriadMenuOpen);
    };

    const handleClick = event => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const toggleDrawer = () => {
        setDrawerOpen(!drawerOpen);
    };
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton
                        edge="start"
                        className={classes.menuButton}
                        color="inherit"
                        aria-label="menu"
                        onClick={() => toggleDrawer()}
                    >
                        <MenuIcon />
                        <Drawer
                            anchor="left"
                            open={drawerOpen}
                            onClose={() => toggleDrawer()}
                        >
                            <div className={classes.list}>
                                <List>
                                    <ListItem button component={RouterLink} to="/">
                                        <ListItemIcon>
                                            <HomeIcon color="primary" />
                                        </ListItemIcon>
                                        <ListItemText primary="Home" />
                                    </ListItem>
                                    <ListItem
                                        button
                                        onClick={() => handleLeadershipTriadClick()}
                                    >
                                        <ListItemIcon>
                                            <HomeIcon color="primary" />
                                        </ListItemIcon>
                                        <ListItemText primary="Leadership Triad" />
                                        {leadershipTriadMenuOpen ? (
                                            <ExpandLess />
                                        ) : (
                                            <ExpandMore />
                                        )}
                                    </ListItem>
                                    <Collapse
                                        in={leadershipTriadMenuOpen}
                                        timeout="auto"
                                        unmountOnExit
                                    >
                                        <List component="div" disablePadding>
                                            <ListItem button className={classes.nested}>
                                                <ListItemIcon>
                                                    <HomeIcon />
                                                </ListItemIcon>
                                            </ListItem>
                                        </List>
                                    </Collapse>
                                    <ListItem button>
                                        <ListItemIcon>
                                            <InboxIcon color="primary" />
                                        </ListItemIcon>
                                        <ListItemText primary="Testing" />
                                    </ListItem>
                                    <ListItem button>
                                        <ListItemIcon>
                                            <InboxIcon color="primary" />
                                        </ListItemIcon>
                                        <ListItemText primary="Testing" />
                                    </ListItem>
                                </List>
                                <Divider />
                                <List>
                                    <ListItem
                                        button
                                        component={RouterLink}
                                        to="/admin/companies"
                                    >
                                        <ListItemIcon>
                                            <BusinessIcon color="primary" />
                                        </ListItemIcon>
                                        <ListItemText primary="Companies" />
                                    </ListItem>
                                    <ListItem
                                        button
                                        component={RouterLink}
                                        to="/admin/users"
                                    >
                                        <ListItemIcon>
                                            <PeopleIcon color="primary" />
                                        </ListItemIcon>
                                        <ListItemText primary="Users" />
                                    </ListItem>
                                </List>
                                <Divider />
                                <List>
                                    <ListItem button component={RouterLink} to="/profile">
                                        <ListItemIcon>
                                            <AccountCircle color="primary" />
                                        </ListItemIcon>
                                        <ListItemText primary="Profile" />
                                    </ListItem>
                                    <ListItem button component={RouterLink} to="/logout">
                                        <ListItemIcon>
                                            <ExitToAppIcon color="primary" />
                                        </ListItemIcon>
                                        <ListItemText primary="Logout" />
                                    </ListItem>
                                </List>
                            </div>
                        </Drawer>
                    </IconButton>
                    <Typography variant="h6" className={classes.title}>
                        Leadership Program
                    </Typography>
                    <IconButton color="inherit" onClick={handleClick}>
                        <AccountCircle />
                    </IconButton>
                    <Menu
                        id="admin-menu"
                        anchorEl={anchorEl}
                        keepMounted
                        open={Boolean(anchorEl)}
                        onClose={handleClose}
                    >
                        <MenuItem
                            component={RouterLink}
                            to="/profile"
                            onClick={handleClose}
                        >
                            Profile
                        </MenuItem>
                        <MenuItem
                            onClick={handleClose}
                            component={RouterLink}
                            to="/logout"
                        >
                            Logout
                        </MenuItem>
                    </Menu>
                </Toolbar>
            </AppBar>
        </div>
    );
};

export default Header;

Answer 1

您是否嘗試過用 ListItemSecondaryAction 包圍 IconButton？

<ListItemSecondaryAction>
  <IconButton onClick={handleOnClick}>
    {openState ? <ExpandLess /> : <ExpandMore />}
  </IconButton>
</ListItemSecondaryAction>

我試圖做一些類似的事情，其中​​一個列表項有兩個可點擊區域和兩個不同的操作：單擊 ListItem（轉到頁面）或單擊 IconButton（展開 ListItem）以顯示嵌套的 ListItems。 如果沒有這個 ListItemSecondaryAction，當我點擊一個列表項時，它會同時路由和展開 ListItem，這是不可取的。

添加ListItem和IconButton的SecondaryAction分離的點擊動作。 文檔不是很好，所以我花了一段時間才理解目的，但它在這里。