Question

我需要根据数组数据创建折叠菜单，

现在我单击任何菜单，但展开所有子菜单

我认为我的问题是我不能为主菜单设置唯一的状态“打开”

我不想被分配为“州” 为了将来支持可能包含3或4的其他数据

我正在使用React.js，material-ui

请帮助我

非常感谢

promise

Answer 1

我认为我的问题是我不能为主菜单设置唯一的状态“打开”

是的，是的。您想折叠/展开两个不同的（子）菜单，但不影响另一个菜单。考虑到这一点，您需要创建一种可能性来分别保存每个菜单的当前“打开”状态。

对于不同的菜单，您已经具有唯一的ID，可以使用它们来实现您的目标。一种方法是使用菜单的相关设置来扩展状态：

state = { settings: [{ id: "1", open: false }, { id: "2", open: false }] };

这使您可以获得有关每个菜单的折叠状态的信息。

因此，您需要稍微扩展handleClick函数，以便仅更改您单击的菜单项的状态：

handleClick = id => {
  this.setState(state => ({
    ...state,
    settings: state.settings.map(item =>
      item.id === id ? { ...item, open: !item.open } : item
    )
  }));
};

在渲染功能中，您需要确保将单击的菜单项的正确ID传递给handleClick函数，并选择正确的打开状态。

<React.Fragment key={each.id}>
  <ListItem button onClick={() => this.handleClick(each.id)}>
    <ListItemText inset primary={each.nameHeader} />
    settings.find(item => item.id === each.id).open
    ? "expanded"
    : "collapsed"}
  </ListItem>
  <Divider />
  <Collapse
    in={settings.find(item => item.id === each.id).open}
    timeout="auto"
    unmountOnExit
  >
  <List component="div" disablePadding>
    {each.subMenu.map(subData => (
      <ListItem key={subData.id} button>
        <ListItemText inset primary={subData.name} />
      </ListItem>
     ))}
   </List>
 </Collapse>
</React.Fragment>

看到它在这里工作：https://codesandbox.io/s/6xjz837j9z

如何使多个折叠处于动态状态

1 个答案: