Ящик Material-UI с панелью приложений не работает с синтаксисом компонента

Я создал новый поток из этого one, чтобы избежать путаницы, поскольку кто-то сказал мне, что Leftnav теперь Drawer в компонентах Material-UI.

У меня все еще есть проблемы, первая из которых 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}, чтобы попытаться заставить меню гамбургера переключать ящик, но ничего не происходит. Есть ли какая-либо документация о SYNTAX, параметрах или каких-либо справочных материалах, которые я могу посмотреть, чтобы реализовать эту структуру материального пользовательского интерфейса?


material-ui appbar drawer
person HGB    schedule 09.05.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

open опора Drawer должна указывать на ваше состояние:

<Drawer
  docked={false}
  open={this.state.open}
>
  ...
</Drawer>
person Yuya    schedule 09.05.2016

arrow_upward
5
arrow_downward

Также есть еще одна важная деталь, вы должны привязать «это» в:

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>
person daniel    schedule 12.07.2016
comment
Ух ты! Не ожидал найти решение своей проблемы в этой теме! :D Была проблема с onTouchTap, где событие щелчка onLeftIconButtonTouchTap запускало все события MenuItem onTouchTap. Большое спасибо, приятель! - person Zohair; 04.08.2016
comment
подробнее: stackoverflow.com/questions/42537511/ - person Orkun Ozen; 24.06.2018

arrow_upward
0
arrow_downward

Я закончил с этим:

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,
};
person Joost van der Laan    schedule 18.11.2016