带有Appbar的Material-UI Drawer无法使用组件语法 [英] Material-UI Drawer with Appbar not working with component syntax
问题描述
我创建了一个新线程从这个开始,以避免混淆,因为有人告诉我 Leftnav
现在是Material-UI组件中的 Drawer
.
I have created a new thread from this one to avoid confusion as someone told me that Leftnav
is now Drawer
within the Material-UI components.
我仍然遇到问题,第一个是ES7?箭头功能的语法在此处显示.我现在已更改为以下带有平面链接的代码,以尝试了解发生了什么:
I am still having problems, the first which is the ES7? syntax of the arrow functions shown here. I have changed to the following code with flat links for now to try to understand what is going on:
import React, { Component } from 'react'
import { Drawer, AppBar, MenuItem} from 'material-ui'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { Route, Router } from 'react-router'
export default class Header extends Component {
constructor(props){
super(props);
this.state = {open:false};
}
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
handleToggle() {
this.setState({open: !this.state.open});
console.log("open")
}
handleClose() { this.setState({open: false}); }
render() {
return (
<div>
<Drawer
docked={false}
open={false}>
<MenuItem onTouchTap={this.handleClose}>Menu Item 1</MenuItem>
<MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
<MenuItem onTouchTap={this.handleClose}>Menu Item 3</MenuItem>
</Drawer>
<AppBar title="App Bar Example"
isInitiallyOpen={true} onLeftIconButtonTouchTap={this.handleToggle} onLeftIconButtonClick={this.handleToggle} />
</div>
);
}
}
Header.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
export default Header;
我现在没有出现任何错误,但是它不起作用.我添加了 onLeftIconButtonClick = {this.handleToggle}
来尝试使汉堡菜单切换抽屉,但是没有任何反应.我是否可以找到有关SYNTAX,参数或任何参考资料的任何文档,以实现此material-ui框架?
I am now getting no errors but it does not work. I have added onLeftIconButtonClick={this.handleToggle}
to try getting the hamburger menu toggling the Drawer but nothing happens. Is there any documentation about SYNTAX, parametres or any reference material I can look in order to implement this material-ui framework?
推荐答案
Drawer
的 open
道具应指向您的状态:
The open
prop of Drawer
should point to your state:
<Drawer
docked={false}
open={this.state.open}
>
...
</Drawer>
这篇关于带有Appbar的Material-UI Drawer无法使用组件语法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!