抽屉打不开

Question

晚上好。我有一个我认为很容易解决的问题，但我无法解决，因为我只是反应的初学者。问题是我放在我的appbar中的抽屉没有打开，控制台上没有错误，所以我希望你们帮助。 PS：抱歉英语不好，我是巴西人。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Toolbar from 'material-ui/Toolbar';
import MenuIcon from 'material-ui-icons/Menu';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import '../assets/scss/main.scss';
import img from '../assets/images/react.png';

const styles = theme => ({
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  inputProps: {
    step: 300,
  },
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
  paper: {
    padding: 50,
    textAlign: 'center',
    border: '5px solid black',
    width: '100%',
  },
  paper1: {
    backgroundColor: 'red',
    marginTop: '13%',
  },
  img: {
    width: '45%',
  },
  appbar: {
    marginLeft: '-20.20%',
    marginTop: '-20%',
    width: '139.99%',
  },
});


function ButtonAppBar(props) {
  const { classes } = props;
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = {
      email: document.getElementById('email').value,
      password: document.getElementById('password').value,
    };
    console.log(data);
  };
  return (

    <div className={styles.root}>
      <Grid container spacing={8} alignItems="center" justify="center">
        <Paper className={classes.paper}>
        <div>
        <AppBar position="static" className={classes.appbar}>
        <Drawer />
          <Toolbar>
          <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          </Toolbar>
      </AppBar>
      </div>
          <img src={img} alt="React" className={classes.img} /><br />
          <form onSubmit={handleSubmit} noValidate>
            <TextField id="email" type="email" label="Usuário" className={classes.user} /><br />
            <TextField id="password" type="password" label="Senha" className={classes.senha} />
            <div>
            <AppBar position="static" className={classes.paper1} >
              <Button type="submit" color="contrast">Login</Button>
            </AppBar>
            </div>
          </form>
        </Paper>
      </Grid>
    </div>
  );
}

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

export default withStyles(styles)(ButtonAppBar);

Answer 1

查看文档中的Drawer demos。你会看到Drawer 使用open 属性来指定它是否打开。在演示中，这是我控制的状态。

通常的处理方式是在 AppBar 中使用一个按钮，例如 IconButton，并带有一个 onClick 处理程序，该处理程序发出状态更改，从而导致重新渲染。

这些演示应该可以帮助您重新配置您的应用并开始使用。使用组件状态打开和关闭抽屉的最直接示例是Responsive Drawer 演示的移动部分。

它将状态初始化为 false 并使用 this.state.mobileOpen 呈现 open 属性。 AppBar 有一个带有 handleDrawerToggle 的 IconButton，因为它是 onClick 处理程序，它改变状态，导致组件重新渲染。