时间戳

首页 > 解决方案 > material-ui Drawer listitem 显示活动项目

reactjs - material-ui Drawer listitem 显示活动项目

问题描述

我想在我的抽屉中突出显示所选项目。以下是我的代码

  <Link to ="/#" style={{textDecoration:'none'}}>
  <ListItem button selected={selectedIndex === 0} onClick={(event) => handleListItemClick(event, 0)} >
    <ListItemIcon>
      <HomeIcon  color="secondary"/>
    </ListItemIcon>
    <ListItemText primary="Home" />
  </ListItem>
  </Link>
  <Link to ="/movies" style={{textDecoration:'none'}}>
  <ListItem button selected={selectedIndex === 1} onClick={(event) => handleListItemClick(event, 1)}>
    <ListItemIcon>
      <MovieFilterIcon />
    </ListItemIcon>
    <ListItemText primary="Movies" />
  </ListItem>
  </Link>

以下是我为抽屉调用的功能

  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };

我想要的是当我单击电影时它应该转到电影和电影列表项应该显示为活动。 我愿意接受建议

标签： reactjsmaterial-ui

解决方案

selectedIndex当导航到新页面时，您可能面临的问题是重置为默认状态（在您的情况下为 1）。

selectedIndex最简单的解决方法是添加一个 useEffect 函数来设置客户端挂载时的正确值。切换浏览器的 URL 以确定要设置的值：

  useEffect(() => {
    switch (window.location.pathname) {
      case "/":
        setSelectedIndex(0)
        break
      case "/movies":
        setSelectedIndex(1)
        break
      default:
        break
    }
  }, [])

这是一个与您的设置类似的CodeSandbox ，因此您可以详细查看所有内容

推荐阅读