带有Appbar的Material UI Drawer无法使用组件语法

Question

我从这个线程创建了一个新线程，以避免混淆，因为有人告诉我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;

我现在没有任何错误，但它不起作用。我添加了onLeftIconButtonClick={this.handleToggle}，试图让汉堡菜单切换抽屉，但什么也没发生。是否有任何关于语法、参数或任何参考资料的文档，我可以查看以实现此材料ui框架？

Answer 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>

Answer 2

Drawer的open道具应该指向您的状态：

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

Answer 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,
};