drawer - 带有 Appbar 的 Material-UI Drawer 不适用于组件语法

Question

我创建了一个新线程 from this one为了避免混淆，因为有人告诉我 Leftnav 现在是 Material-UI 组件中的 Drawer。

我还有问题，第一个是ES7？箭头函数的语法 shown here .我现在已更改为带有平面链接的以下代码，以尝试了解发生了什么:

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 框架？

Answer 1

还有一个重要的细节，你必须绑定(bind)“this”:

onLeftIconButtonTouchTap={this.handleToggle.bind(this)}

并在:

      <MenuItem onTouchTap={this.handleClose.bind(this)}>Menu Item 1</MenuItem>
      <MenuItem onTouchTap={this.handleClose.bind(this)}>Menu Item 2</MenuItem>
      <MenuItem onTouchTap={this.handleClose.bind(this)}>Menu Item 3</MenuItem>