SideMenu default selection

[chrwei]

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

[jarry]

Please update to the newest version and set the 'selection' property for the SideMenu component.

[chrwei]

this, based on your "AppLayout" example, doesn't seem to be working, what am I missing?

Code:

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;

[jarry]

Please follow these steps.

1. Import the 'treeHelper' to find the specified node in menus.

Code:

import { SideMenu, treeHelper } from 'rc-easyui';

2. Set the 'selectedMenu' property value.

Code:

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'.

Code:

<SideMenu
  data={menus} 
  border={false} 
  collapsed={collapsed}
  onItemClick={this.handleItemClick.bind(this)}
  selection={selectedMenu}
/>

[chrwei]

got it working, thanks.