Heim > Artikel > Web-Frontend > 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!