javascript - 在 Material ui 中将 AppBar 与 Drawer 结合起来

Question

我有一个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中的按钮时打开左侧的抽屉，但我不知道如何执行此操作。

非常感谢您对此的帮助。

Answer 1

如果我理解正确，你可以这样做 - 存储指示抽屉是否在组件状态下打开的 bool 值:

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 文件)。