Title: SideMenu default selection
Post by: chrwei on November 01, 2019, 10:30:07 AM
there doesn't seem to be a way set a default selection, or to programatically select an item. am I overlooking it?
what I'm looking to do is to sync the menu with Router, so when you go directly to a path it is selected in the SideMenu
Title: Re: SideMenu default selection
Post by: jarry on November 05, 2019, 12:43:11 AM
Please update to the newest version and set the 'selection' property for the SideMenu component.
Title: Re: SideMenu default selection
Post by: chrwei on November 06, 2019, 11:19:27 AM
this, based on your "AppLayout" example, doesn't seem to be working, what am I missing? import React from 'react';
import { SideMenu } from 'rc-easyui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'AppLayout',
width: 200,
collapsed: false,
selectedMenu: { text: "Wizard" },
menus: [
{
text: "Forms",
iconCls: "fa fa-wpforms",
state: "open",
children: [
{
text: "Form Element"
},
{
text: "Wizard"
},
{
text: "File Upload"
}
]
},
{
text: "Mail",
iconCls: "fa fa-at",
selected: true,
children: [
{
text: "Inbox"
},
{
text: "Sent"
},
{
text: "Trash",
children: [
{
text: "Item1"
},
{
text: "Item2"
}
]
}
]
},
{
text: "Layout",
iconCls: "fa fa-table",
children: [
{
text: "Panel"
},
{
text: "Accordion"
},
{
text: "Tabs"
}
]
}
]
}
}
toggle() {
const { collapsed } = this.state;
this.setState({
collapsed: !collapsed,
width: collapsed ? 200 : 50
})
}
handleItemClick(item) {
this.setState({ selectedMenu: item })
}
render() {
const { menus, title, width, selectedMenu, collapsed } = this.state;
return (
<div>
<div className="f-column">
<div className="main-header f-row">
<div className="f-row f-full">
<div className="main-title f-animate f-row" style={{ width: width }}>
<img className="app-logo" src="https://www.jeasyui.com/favicon.ico" />
{!collapsed && <span>{title}</span>}
</div>
<div className="main-bar f-full">
<span className="main-toggle fa fa-bars" onClick={this.toggle.bind(this)}></span>
</div>
</div>
</div>
<div className="f-row f-full">
<div className="sidebar-body f-animate" style={{ width: width }}>
{!collapsed && <div className="sidebar-user">User Panel</div>}
<SideMenu
data={menus} border={false} collapsed={collapsed}
onItemClick={this.handleItemClick.bind(this)}
selected={selectedMenu}
></SideMenu>
</div>
<div className="main-body f-full">
{selectedMenu && <p>{selectedMenu.text}</p>}
</div>
</div>
</div>
</div>
);
}
}
export default App;
Title: Re: SideMenu default selection
Post by: jarry on November 06, 2019, 07:01:58 PM
Please follow these steps. 1. Import the 'treeHelper' to find the specified node in menus. import { SideMenu, treeHelper } from 'rc-easyui';
2. Set the 'selectedMenu' property value. class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'AppLayout',
width: 200,
collapsed: false,
selectedMenu: treeHelper.findNode(menus, 'text', 'Wizard'),
menus: menus
}
}
...
3. Set the 'selection' instead of the 'selected'. <SideMenu
data={menus}
border={false}
collapsed={collapsed}
onItemClick={this.handleItemClick.bind(this)}
selection={selectedMenu}
/>
Title: Re: SideMenu default selection
Post by: chrwei on November 18, 2019, 02:38:37 PM
got it working, thanks.
|