jquery - 如何在模块上使用 Material ui 方法

Question

我正在为一个项目学习 UI 和 ReactJS Material 。 Atm 我只是尝试 Material ui 的不同模块。例如，我有这个模块，我想使用 RaishedButtom 来切换 LeftNav，但我几乎尝试了所有方法，但没有成功。

在这里你可以看到我的模块:

    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;

警报有效，但我不确定如何使用 LeftNav.toggle() 方法

非常感谢!!

Answer 1

您可以通过 using a ref 获取对 LeftNav 实例的引用。像这样的事情应该可以解决问题:

...
<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();
}

事实上，LeftNav demo page就是这样做的，你可以看到 in the source for the demo这正是它的作用:

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
  });
}