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

【问题标题】：Material-UI Drawer with Appbar not working with component syntax带有 Appbar 的 Material-UI Drawer 不适用于组件语法
【发布时间】：2016-09-04 09:07:24
【问题描述】：

我创建了一个新线程 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} 来尝试让汉堡菜单切换抽屉，但没有任何反应。是否有任何关于语法、参数或任何参考资料的文档，我可以查看以实现这个 material-ui 框架？

【问题讨论】：

标签： drawer material-ui appbar

【解决方案1】：

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

【讨论】：

哇！预计不会在此线程中找到我的问题的解决方案！ :D onTouchTap 有问题，其中 onLeftIconButtonTouchTap 点击事件触发所有 MenuItem onTouchTap eventets..非常感谢 Mate！
更详细：stackoverflow.com/questions/42537511/…

【解决方案2】：

Drawer 的 open 属性应该指向你的状态：

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

【讨论】：

【解决方案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,
};

【讨论】：