Question

我创建了一个新帖子from this one以避免混淆，因为有人告诉我Leftnav现在是{-1}}在Material-UI组件中。

我还有问题，第一个是ES7？箭头函数shown here的语法。我现在已经改为使用扁平链接的以下代码来试图了解发生了什么：

Drawer

我现在没有错误，但它不起作用。我已添加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;尝试让汉堡包菜单切换抽屉，但没有任何反应。有没有关于SYNTAX，参数或任何参考资料的文档，我可以看看为了实现这个材料-ui框架？

Answer 1

还有另一个重要的细节，你必须绑定＆＃34;这个＆＃34;在：

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

open的{{1}}道具应该指向你的州：

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

具有Appbar的Material-UI抽屉不使用组件语法

3 个答案: