Tiroir Material-UI avec Appbar ne fonctionne pas avec la syntaxe du composant

Question

J'ai créé un nouveau thread à partir de celui-ci pour éviter la confusion car quelqu'un m'a dit que Leftnav est maintenant Drawer dans les composants Material-UI.

J'ai encore des problèmes, le premier concerne la syntaxe ES7? des fonctions fléchées montrée ici. J'ai changé le code suivant avec des liens plats pour essayer de comprendre ce qui se passe :

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 (

                  Menu Item 1
                  Menu Item 2
                  Menu Item 3

            );
        }
    }

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

export default Header;

Je n'ai plus d'erreurs mais ça ne fonctionne pas. J'ai ajouté onLeftIconButtonClick={this.handleToggle} pour essayer de faire basculer le menu hamburger en ouvrant le Drawer mais rien ne se passe. Y a-t-il une documentation sur la SYNTAXE, les paramètres ou tout autre matériel de référence que je peux consulter pour implémenter ce framework material-ui ?

Answer 1

Il y a aussi un autre détail important, vous devez lier "this" dans :

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

Et dans :

      Menu élément 1
      Menu élément 2
      Menu élément 3

Answer 2

La propriété open de Drawer devrait pointer vers votre état :

  ...

Answer 3

J'ai fini avec ceci :

import React from 'react';
// import { Drawer, AppBar, MenuItem} from 'material-ui'
// C'est plus rapide et crée des constructions plus petites:
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 (

                 this.setState({open})}
                  >

                  Élément de menu 1
                  Élément de menu 2
                  Élément de menu 3

            );
        }
    }

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