我正在学习ReactJS和material-ui (http://material-ui.com/)。
我想为我的应用程序创建一个默认模板。 我想在单独的组件中使用一个AppBar和一个LeftNav(在新版本中更名为Drawer)。
AppBar默认有一个菜单按钮。我想用它来打开LeftNav,但我不知道怎么调用我的LeftBarComponent组件函数来打开它。
我已经基本理解了如何在组件之间通信,但在我的情况下,由于没有文档,我不知道该怎么做。 唯一我知道要打开LeftNav元素的方法是使用LeftNav.toggle()
http://material-ui.com/#/components/left-nav
谢谢你的帮助。
Default.jsx
use strict';
var React = require('react');
var pageStore = require('../../stores/page');
var MainNavbar = require('../modules/navbar.jsx');
var LeftNavbar = require('../modules/leftbar.jsx');
var getState = function() {
return {
title: pageStore.get().title
};
};
var DefaultComponent = React.createClass({
mixins: [pageStore.mixin],
componentDidMount: function() {
pageStore.emitChange();
},
getInitialState: function() {
return getState();
},
render: function() {
return (
/* jshint ignore:start */
<div className="main-container">
<MainNavbar />
<LeftNavbar />
<div className="content">
{this.props.children}
</div>
</div>
/* jshint ignore:end */
);
},
// Event handler for 'change' events coming from store mixins.
_onChange: function() {
this.setState(getState());
}
});
module.exports = DefaultComponent;
导航栏.jsx
'use strict';
var React = require('react');
var routeActions = require('../../actions/routes');
var MUI = require('material-ui');
var AppBar = MUI.AppBar;
// Navbar Component
// Application main menu
// Usage: <Navbar />
var NavbarComponent = React.createClass({
render: function() {
return (
/* jshint ignore:start */
<AppBar title="MyApp" onMenuIconButtonTouchTap={ this._handleClick }>
<div className="clear"></div>
</AppBar>
/* jshint ignore:end */
);
},
_handleClick: function()
{
console.log('ok');
}
});
module.exports = NavbarComponent;
leftbar.jsx
'use strict';
var React = require('react');
var routeActions = require('../../actions/routes');
var MUI = require('material-ui');
var LeftNav = MUI.LeftNav;
var MenuItem = MUI.MenuItem;
var menuItems = [
{ route: 'home', text: 'Home' },
{ route: 'about', text: 'About' },
];
// LeftBar Component
// Application left menu
// Usage: <LeftBar />
var LeftBarComponent = React.createClass({
render: function() {
return (
/* jshint ignore:start */
<LeftNav menuItems={menuItems} docked={false} />
/* jshint ignore:end */
);
},
_handleClick: function()
{
console.log('ok');
}
});
module.exports = LeftBarComponent;