Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

在nextjs13中onOpenChange可以改变openkeys，但是改变后，菜单不能收起

Aperta
  • Qualcosa non va?
#621 0 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
nextjs, react, typescript
Ambito
frontend

Direzione di ricerca

Parti dal Menu controllato mostrato nell’issue, usando openKeys e onOpenChange, e riproducilo in una configurazione Next.js 13. Esamina come Menu applica le chiavi aggiornate; il lavoro è completato quando lo stesso aggiornamento dello stato consente al sottomenu inline di aprirsi e richiudersi in modo affidabile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

代码如下

  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已经发生了改变，但是子菜单还是收不回去

Lingua principale
TypeScript
Stelle
701
Fork
266
Merge medio
1g 9h
PR unite (30g)
1

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-component/menu

Tutte le issue di react-component/menu

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.