动态材料ui下拉菜单

Question

我使用material-ui js创建了一个动态的下拉菜单，但是当我点击其中一个菜单时，它打开了所有的菜单，反之亦然。

编码

Answer 1

你为两个菜单链接维护了1个状态。为您的列表维护一个名称(page.title)。在 handlerListOpen 函数使用key动态设置状态对象。

你的codesandbox的工作副本

代码片段。

export default function App() {
  const [openList, setopenList] = React.useState({});

  const handlerListOpen = el => {
    console.log("el", el.currentTarget.getAttribute("name"));
    const target = el.currentTarget;
    setopenList(prev => ({
      ...prev,
      [target.getAttribute("name")]: !prev[
        target.getAttribute("name")
      ]
    }));
  };
  return (
    <List component={"nav"}>
      {pages.map((page, index) => (
        <List>
          <ListItem name={page.title} button onClick={handlerListOpen}>
            <ListItemIcon>{pages.icon}</ListItemIcon>
            <ListItemText primary={page.title} />
            {openList[page.title] ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          {page.collapse.map((collapse, index) => (
            <Collapse in={openList[page.title]} timeout="auto" unmountOnExit>
              <li>
                {" "}
                <Link to={collapse.href}>
                  <List component="div" disablePadding key={index}>
                    <ListItem button>
                      <ListItemIcon>{collapse.icon}</ListItemIcon>
                      <ListItemText primary={collapse.title} />
                      <ListItemIcon>
                        <ChevronRightIcon />
                      </ListItemIcon>
                    </ListItem>
                  </List>
                </Link>
              </li>
            </Collapse>
          ))}
        </List>
      ))}
    </List>
  );
}