我正在为一个项目学习 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() 方法
非常感谢!!
最佳答案
您可以通过 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
});
}
关于jquery - 如何在模块上使用 Material ui 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29493570/