在 Material ui 中将 AppBar 与 Drawer 组合答案

【问题标题】：Combine an AppBar with a Drawer in material ui在 Material ui 中将 AppBar 与 Drawer 组合
【发布时间】：2018-02-14 06:25:03
【问题描述】：

我有一个 AppBar 组件，我想将它与抽屉组合，这是 AppBar 代码：

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from "material-ui/Typography";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import MenuIcon from "material-ui-icons/Menu";
import TemporaryDrawer from "./Drawer";

const styles = {
  root: {
    width: "100%"
  },
  flex: {
    flex: 1
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  },
};

function ButtonAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
        <TemporaryDrawer/>
      <AppBar position="static">
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            Title
          </Typography>
          <Button color="inherit">Drawer</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ButtonAppBar);

目前我正在使用material-ui v1.0.0-beta.33，我想要的是在单击AppBar 中的按钮时在左侧打开一个抽屉，但我不知道该怎么做。

我将不胜感激。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

如果我理解正确，您可以这样做 - 存储指示抽屉在组件状态下打开的布尔值：

state = { drawerIsOpen: false }

当用户点击你的按钮时你会改变它：

  handleDrawerOpen = () => {
    this.setState({ drawerIsOpen: true });
  };

您的render 方法应如下所示：

render() {
  const { classes } = this.props;

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            Title
        </Typography>
          <Button onClick={this.handleDrawerOpen} color="inherit">Drawer</Button>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="persistent"
        classes={{
          paper: classes.drawerPaper,
        }}
        open={this.state.drawerIsOpen}
      >
        <div className={classes.drawerHeader}>
          <IconButton onClick={this.handleDrawerClose}>
            <ChevronLeftIcon />
          </IconButton>
        </div>
        <div className={classes.drawerInner}>
          <p>drawer content</p>
        </div>
      </Drawer>
    </div>
  );
}

检查this simplified demo（见demo.js文件）。

【讨论】：