ReactJs 嵌套列表仅折叠一个列表项

Question

我正在尝试使用材质 UI 和 ReactJS 制作折叠子列表，我已按照材质 UI 列表中的示例进行操作。 问题是当单击一个列表项展开其他列表项时，也会像下图一样展开：

这是代码：

   return (
        <List component="nav"
              aria-labelledby="nested-list-subheader"
              subheader={
                  <ListSubheader component="div" id="nested-list-subheader">
                      Nested List Items
                  </ListSubheader>
              }>
            {items.map((item, index, list) => (
                <Fragment key={item.id}>
                    <ListItem button key={item.id} onClick={handleClick}>
                        <ListItemAvatar>
                            <Avatar>
                                <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`}
                                     alt=""/>
                            </Avatar>
                        </ListItemAvatar>
                        <ListItemText primary={item.name}/>
                        {open ? <ExpandLess/> : <ExpandMore/>}
                    </ListItem>
                    <Collapse in={open} timeout="auto" unmountOnExit>
                        <List component="div" disablePadding>
                            <ListItem button className={classes.nested}>
                                <ListItemIcon>
                                    <LensIcon style={{color: changeColorStatus(item)}}/>
                                </ListItemIcon>
                                <ListItemText primary="Status"/>
                            </ListItem>
                            <ListItemSecondaryAction>
                                <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
                                    <MoreVertIcon/>
                                </IconButton>
                            </ListItemSecondaryAction>
                        </List>
                    </Collapse>
                    {index < list.length - 1 ? <Divider/> : null}
                </Fragment>
            ))}
        </List>
    );
}

  const handleClick = () => {
        setOpen(!open);
    };

提前致谢。

Answer 1

这是因为您使用单个 boolean 来确定多个列表项的打开状态。您应该做的是改用int 并将item.id 分配给它。

所以你需要把handleClick事件改成如下：

<ListItem button key={item.id} onClick={() => handleClick(item.id)}>
...

至于处理程序：

const handleClick = (itemID) => {
  setOpen(itemID);
  // or simply setState({ openItemID: itemID });
};

现在，您必须更改渲染条件。

{openItemID === item.id ? <ExpandLess/> : <ExpandMore/>}

和

<Collapse in={openItemID === item.id} timeout="auto" unmountOnExit>
...