Left Nav Routes and event handlers

[hackingbeauty]

Hi, I'm trying to specify an action when a user clicks on an item in the LeftNav component; however, nothing is happening.

How do I attach behavior to a link in the LeftNav?

render() {
    var styles = this.getStyles();
    var authData = this.state.authData;

    var menuItems = [  
      { type: MenuItem.Types.SUBHEADER, text: 'Settings' },
      {
         type: MenuItem.Types.LINK,
         route: 'root',
         text: 'Root'
      }
    ];
}

    return (
      <div id="app-left-nav">
        <LeftNav ref="leftNav" docked={false} menuItems={menuItems} onNavOpen={this.onNavOpen} onChange={this.onChange}/>
      </div>
    );
}

[shaurya947]

@hackingbeauty you have defined an onChange function right? If you haven't, that's what you need. Here's an example:

onChange(e, key, payload) {
    <some_instance_of_react_router>.transitionTo(payload.route);
  }

Of course, you need to set up React router and define the routes. Here's a basic example on how to do so. You can also look at how routing is done in the source code for the docs, namely the app.jsx, app-routes.jsx and app-left-nav.jsx files.

[hackingbeauty]

Yes, I have defined onChange; however, onChange doesn't seem to work.

onChange(e, key, payload){
    alert('hi');
    transitionTo(payload.route);
  },

  render() {
    var menuItems = [  
      { type: MenuItem.Types.SUBHEADER, text: 'Settings' },
      {
         type: MenuItem.Types.LINK,
         route: 'all-videos',
         text: 'All videos'
      },
      {
         type: MenuItem.Types.LINK,
         route: 'tagged-videos',
         text: 'Tagged videos'
      }
    ];

    return (
      <div id="app-left-nav">
        <LeftNav ref="leftNav" docked={false} menuItems={menuItems} onChange={this.onChange}/>
      </div>
    );
  }

Any ideas?

[shaurya947]

If you debug with developer tools on Chrome or something, does the console say anything? (warnings / errors)

[jason-henriksen]

Did anything ever come of this? I cannot get any item in LeftNav to respond to a click either.

[shaurya947]

Also, adding @oliviertassinari and @hai-cea so they can look into this..

[alitaheri]

LeftNav now supports nested children, which is the preferred usage. the actionJSON will soon be deprecated.

[hackingbeauty]

So how can we use this? Can I put React components inside of the LeftNav now?

[alitaheri]

Yes, you can pretty much put anything in it, just like a div.