我需要从数组数据制作折叠菜单,
现在我单击任何菜单但展开所有子菜单
我认为我的问题是我不能为主菜单设置唯一状态“打开”
我不想被分配“状态” 支持将来可能有 3 或 4 个的附加数据
我使用 React.js、material-ui
请帮助我
非常感谢
const myData = [
{
id: '1',
nameHeader: 'Header1',
subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
},
{
id: '2',
nameHeader: 'Header2',
subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
}
]
class Myclass extends Component {
state = { open: false }
handleClick = () => {
this.setState(state => ({ open: !state.open }))
}
render() {
const { open } = this.state
return (
<div style={{ marginRight: '15px' }}>
<List component="nav">
{myData.map(each => (
<React.Fragment key={each.id}>
<ListItem button onClick={this.handleClick}>
<ListItemText inset primary={each.nameHeader} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Divider />
<Collapse in={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>
))}
</List>
</div>
)
}
}
export default Myclass
最佳答案
I think my problem is i'm can,t set unique state "open" for Main menu
不知何故,是的。您有两个不同的(子)菜单,您希望折叠/展开而不影响另一个菜单。考虑到这一点,您需要创建一个单独保存每个菜单当前“打开”状态的可能性。
您的不同菜单已经有一个唯一的 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
关于javascript - 如何使多个 Collapse 处于动态状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55673217/