如何在模块上使用 material ui 方法

Question

我正在为一个项目学习 material ui 和 reactjs。 Atm 我只是在尝试 material ui 的不同模块。例如，我有这个模块，我想使用 RaisedButtom 来切换 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 does just this, and you can see 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
  });
}

Answer 2

以上是一个很好的方法。但是，如果您使用的是 Flux 架构，您可能需要研究在商店中捕获状态并将其传递给渲染方法。

这种方法的好处是随时随地都能看到状态。

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

如何在模块上使用 material ui 方法

how to use material ui methods on modules

jquery

reactjs

material-design