Drawer Appbar不使用组件语法的材质UI抽屉

我创建了一个新线程以避免混淆，因为有人告诉我，

Leftnav

现在位于Material UI组件中的

Drawer

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

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;

import React，{Component}来自“React”
从“物料ui”导入{Drawer，AppBar，MenuItem}
从“材质ui/styles/baseThemes/LightBaseThemes”导入baseTheme
从“材质ui/styles/getMuiTheme”导入getMuiTheme
从“react Router”导入{Route，Router}
导出默认类头扩展组件{
建造师（道具）{
超级（道具）；
this.state={open:false}；
}
getChildContext（）{
返回{muiTheme:getMuiTheme（baseTheme）}；
}
手语{
this.setState（{open:！this.state.open}）；
控制台日志（“打开”）
}
handleClose（）{this.setState（{open:false}）；}
render（）{
返回(
菜单项1
菜单项2
菜单项3
);
}
}
Header.childContextTypes={
muiTheme:React.PropTypes.object.isRequired，
};
导出默认标题；

---

我现在没有得到错误，但它不工作。我已经添加了

onLeftIconButtonClick={this.handleToggle}

来尝试让汉堡菜单切换抽屉，但什么也没发生。是否有关于语法、参数或任何参考资料的文档可供我查阅，以实现此材料ui框架

抽屉的

open

道具应指向您的状态：

<Drawer
  docked={false}
  open={this.state.open}
>
  ...
</Drawer>

...

还有另一个重要的细节，您必须将“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>

菜单项1
菜单项2
菜单项3

我的结局是：

import React from 'react';
// import { Drawer, AppBar, MenuItem} from 'material-ui'
// This is faster & creates smaller builds:
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';

import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'    

export default class Header extends React.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={this.state.open}
                  onRequestChange={(open) => this.setState({open})}
                  >

                  <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>
                </Drawer>

                <AppBar   title="App Bar Example"
            onLeftIconButtonTouchTap={this.handleToggle.bind(this)} />
                </div>
            );
        }
    }

    Header.childContextTypes = {
  muiTheme: React.PropTypes.object.isRequired,
};

从“React”导入React；
//从“物料ui”导入{Drawer，AppBar，MenuItem}
//这会更快并创建更小的构建：
从“物料界面/抽屉”导入抽屉；
从“物料ui/AppBar”导入AppBar；
从“物料界面/菜单项”导入菜单项；
从“材质ui/styles/baseThemes/LightBaseThemes”导入baseTheme
从“材质ui/styles/getMuiTheme”导入getMuiTheme
导出默认类标头扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={open:false}；
}
getChildContext（）{
返回{muiTheme:getMuiTheme（baseTheme）}；
}
手语{
this.setState（{open:！this.state.open}）；
控制台日志（“打开”）
}
handleClose（）{this.setState（{open:false}）；}
render（）{
返回(
this.setState（{open}）}
>
菜单项1
菜单项2
菜单项3
);
}
}
Header.childContextTypes={
muiTheme:React.PropTypes.object.isRequired，
};

Wow！不希望在此线程中找到问题的解决方案！：D对onTouchTap有异议，onLeftIconButtonTouchTap点击事件触发了onTouchTap晚上的所有菜单项。非常感谢，伙计！详情如下：

import React from 'react';
// import { Drawer, AppBar, MenuItem} from 'material-ui'
// This is faster & creates smaller builds:
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';

import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'    

export default class Header extends React.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={this.state.open}
                  onRequestChange={(open) => this.setState({open})}
                  >

                  <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>
                </Drawer>

                <AppBar   title="App Bar Example"
            onLeftIconButtonTouchTap={this.handleToggle.bind(this)} />
                </div>
            );
        }
    }

    Header.childContextTypes = {
  muiTheme: React.PropTypes.object.isRequired,
};