Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

The submenu cannot hide after animation end or mouse leave

Offen
  • Stimmt etwas nicht?
#417 0 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Beginne damit, das Verhalten mit dem bereitgestellten CustomMenu-Beispiel zu reproduzieren, und untersuche die von rc-menu verwendete Behandlung des Hoverens und der Mausbewegung im Untermenü. Überprüfe die Animations- und Mouse-leave-Pfade und bestätige anschließend, dass das Untermenü nach Abschluss der Animation oder wenn der Zeiger den Bereich verlässt, zuverlässig ausgeblendet wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

source code:

import * as React from 'react';
import Menu, { SubMenu, MenuItem } from 'rc-menu';
import classNames from 'classnames';
import 'rc-menu/assets/index.css';

const horizontalMotion = {
  motionName: 'rc-menu-open-slide-up',
  motionAppear: true,
  motionEnter: true,
  motionLeave: true
};

const children = [
  <MenuItem key="1">认识小新</MenuItem>,
  <SubMenu key="2" title="到店体验">
    <MenuItem key="2-1">2-1</MenuItem>
  </SubMenu>,
  <SubMenu key="3" className="submenu" title="关于我们">
    <MenuItem key="3-1">企业介绍</MenuItem>
    <MenuItem key="3-2">媒体中心</MenuItem>
    <MenuItem key="3-3">加入我们</MenuItem>
  </SubMenu>,
  <SubMenu key="4" title="探索更多">
    <MenuItem key="4-1">4-1</MenuItem>
  </SubMenu>
];

export default class CustomMenu extends React.PureComponent {
  render() {
    this.config = {
      triggerSubMenuAction: 'hover',
      mode: 'horizontal',
      defaultMotions: { horizontal: horizontalMotion }
    };
    return (
      <Menu defaultActiveFirst {...this.config}>
        {children}
      </Menu>
    );
  }
}
Vorherrschende Sprache
TypeScript
Sterne
701
Forks
267
Ø Merge
1 T. 9 Std.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-component/menu

Alle Issues in react-component/menu

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.