how to use material ui methods on modules

Question

Im learning material ui and reactjs for a project. Atm im just trying the different modules of material ui. For example i have this module and i want to use the RaisedButtom to toggle the LeftNav but i have tried almost everything and i didnt get it working.

here you can see my module:

    var React = require('react'),
  mui = require('material-ui'),
  RaisedButton = mui.RaisedButton;
  LeftNav = mui.LeftNav;
  FontIcon = mui.FontIcon;
  menuItems = mui.menuItems;
  Tabs = mui.Tabs;
  Tab = mui.Tab;

var Main = React.createClass({


  render: function() {


    return (

      <div className="page">
        <Tabs> 
          <Tab label="Item One" > 
            <div className="tab-template-container"> 
              <h2 className="mui-font-style-headline">Tab One Template Example</h2> 
              <p> 
                This is an example of a tab template! 
              </p> 
              <p> 
                You can put any sort of HTML or react component in here. 
              </p> 
            </div> 
          </Tab> 
          <Tab label="Item Two" > 
            <div className="tab-template-container"> 
              <h2 className="mui-font-style-headline">Tab Two Template Example</h2> 
              <p> 
                This is another example of a tab template! 
              </p> 
              <p> 
                Fair warning - the next tab routes to home! 
              </p> 
            </div> 
          </Tab>
        </Tabs>
        <div className="example-page">
          <LeftNav docked={true} menuItems={"numberMenuItems"} />
          <h1>material-ui</h1>
          <h2>example project</h2>
          <RaisedButton label="Super Secret Password" primary={true} onClick=LeftNav.toggle(); />
        </div>
      </div>
    );
  },



  toggle_menu: function() {

    alert('click');

  }

});

module.exports = Main;

the alert works but im not sure how to use the method LeftNav.toggle()

Thank you very much!!

Answer 1

The above is a great method. However, if you are using Flux architecture you may want to look into capturing state in a store and passing it through on a render method.

The bonus to this method is that you can see the state whenever, wherever.

https://facebook.github.io/flux/

Answer 2

You can get a reference to the LeftNav instance by using a ref. Something like this should do the trick:

...
<div className="example-page">
  <LeftNav ref="nav" docked={true} menuItems={"numberMenuItems"} />
  ...
  <RaisedButton label="Super Secret Password" primary={true} onClick={this.toggleMenu} />
</div>
...

toggleMenu: function() {
  // since we put `ref="nav"` on the LeftNav, we can get to it
  // via `this.refs.nav`
  this.refs.nav.toggle();
}

In fact, the LeftNav demo page does just this, and you can see in the source for the demo that that's exactly how it does it:

render: function() {
  // ...

  return (
    <ComponentDoc
      name="Left Nav"
      code={code}
      componentInfo={componentInfo}>

      <div className="left-nav-example">
        <RaisedButton label="Toggle Docked Left Nav" onTouchTap={this._toggleDockedLeftNavClick} /><br/><br/>
        <RaisedButton label="Show Hideable Left Nav" onTouchTap={this._showLeftNavClick} />
        <LeftNav ref="dockedLeftNav" docked={this.state.isDocked} menuItems={menuItems} />
        <LeftNav ref="leftNav" docked={false} menuItems={menuItems} />
      </div>

    </ComponentDoc>
  );
},

_showLeftNavClick: function() {
  this.refs.leftNav.toggle();
},

_toggleDockedLeftNavClick: function() {
  this.refs.dockedLeftNav.toggle();
  this.setState({
    isDocked: !this.state.isDocked
  });
}