So implementieren Sie ein dreistufiges Menü in React

So implementieren Sie ein dreistufiges Menü in React: 1. Die Methode zum Erstellen und Erweitern des dreistufigen übergeordneten Menüs lautet „onOpenChange = (openKeys) => {...}“ 2. Durch „handleSelectkeys(e ){... }“ legt den ausgewählten Status fest; 3. Generieren Sie die Seitenleiste über „oli.push(

Die Betriebsumgebung dieses Tutorials: Windows10 System, React18. .0.0-Version, Dell G3-Computer.

So implementieren Sie ein dreistufiges Menü mit

react + antd, um nur die Seitenleiste einer übergeordneten Menüleiste (dreistufige Menüleiste) zu erweitern

Ich bin bei der Arbeit auf eine Anforderung gestoßen, die eine übergeordnete Menüleiste nur erweitern kann, um die Seite einfach zu halten und das Benutzererlebnis zu verbessern. Ich habe auch lange online gesucht und nichts gefunden, was vollständig erfüllt wurde die Anforderungen, also habe ich es mit dem eigenen Schreiben anderer Leute kombiniert.

So erweitern Sie das dreistufige übergeordnete Menü Sidebar data menu.js

onOpenChange = (openKeys) => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        let openList;
        if(this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            if(latestOpenKey&&latestOpenKey.length===3){
                openList = this.state.openKeys.filter((e)=>{
                    return e.length!==3;
                })
                this.setState({
                    openKeys:openList                });
            }else{
                this.setState({
                    openKeys:openKeys                });
            }           
        }else{
            if(latestOpenKey&&latestOpenKey.length===3){
                openList = this.state.openKeys.filter((e)=>{
                    return e.length!==3;
                })
                openList.push(latestOpenKey);
                this.setState({
                    openKeys:openList[1] ? openList : [openList[0],openList[2]]
                });
            }else{
                this.setState({
                    openKeys: latestOpenKey ? [latestOpenKey] : [],
                });
            }            
        }
    }Empfohlenes Lernen: „
Video-Tutorial reagieren
“
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein dreistufiges Menü in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn