Material-UI Drawer with Appbar not working with component syntax

问题

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.

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;

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?

回答1:

The open prop of Drawer should point to your state:

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

回答2:

There's also another important detail, you have to bind "this" in:

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

And in:

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

回答3:

I ended up with this:

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

来源：https://stackoverflow.com/questions/37120713/material-ui-drawer-with-appbar-not-working-with-component-syntax

标签

drawer

material-ui

appbar