react-component / react-component/menu
在nextjs13中onOpenChange可以改变openkeys,但是改变后,菜单不能收起
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 701
- Forks
- 266
- Avg merge
- 4d 11h
- Merged PRs (30d)
- 3
Description
代码如下
const renderTable = (nodes: TableItem[]) => {
return nodes.map((item) => {
if (!item.children) {
return (
<MenuItem
className={'flex h-10 items-center rounded-md text-sm hover:bg-gray-100'}
key={item.key}
>
{item.label}
</MenuItem>
);
}
return (
<SubMenu
className={'cursor-pointer text-sm'}
key={item.key}
title={
<div className={'flex h-10 items-center justify-between rounded-md text-sm'}>
{item.label}
</div>
}
>
{renderTable(item.children)}
</SubMenu>
);
});
};
const [openKeys, handleOpenKeys] = useState<string[]>([]);
const onOpenChange = (openKeys: string[]) => {
handleOpenKeys(openKeys);
};
<Menu
className={'doc-table w-full px-2'}
mode={'inline'}
openKeys={openKeys}
onOpenChange={onOpenChange}
>
{renderTable(items)}
</Menu>
可以打开子菜单,但是关闭不了,点击的时候,打印可以看到openKeys已经发生了改变,但是子菜单还是收不回去
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the controlled Menu using openKeys and onOpenChange shown in the issue, and reproduce it in a Next.js 13 setup. Inspect how the Menu applies updated keys; the work is done when the same state update allows the inline submenu to open and collapse reliably.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100