javascript - Material UI 抽屉关闭

Question

我有一个 Material UI 抽屉，我可以打开它，但是当我尝试关闭它时，甚至不会调用该事件。

import React from 'react';
import './App.css';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import HomeIcon from '@material-ui/icons/Home';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import InputAdornment from "@material-ui/core/InputAdornment";
import Drawer from '@material-ui/core/Drawer';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      drawerOpen : false
    };

    this.handleDrawerOpen = this.handleDrawerOpen.bind(this);
    this.handleDrawerClosed = this.handleDrawerClosed.bind(this);
  }


  handleDrawerOpen() {
    this.setState({drawerOpen : true});
    console.log("open");
  }

  handleDrawerClosed() {
    this.setState({drawerOpen : false});
    console.log("close");
  }

  render() {
    return (
      <div className={"topBar"}>
        <AppBar >
          <Toolbar className={"topBar"}>
            <div className="divInside">
              <IconButton
                edge="start"
                color="inherit"
                onClick={this.handleDrawerOpen}
              >
                <MenuIcon />
              </IconButton>

              <Typography variant="h6" noWrap>
                Top Questions
              </Typography>
            </div>

            <div className={"divInside"} style={{"minWidth" : "50%"}}>
              <SearchIcon />
              <InputBase
                fullWidth={true}
                placeholder="Search…"
              />
            </div>

            <div>
              <IconButton color="inherit">
                <Badge badgeContent={22} color="secondary">
                  <NotificationsIcon />
                </Badge>
              </IconButton>

              <IconButton
                edge="end"
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
            </div>
          </Toolbar>
        </AppBar>


        <Drawer
          variant="persistent"
          anchor="left"
          open={this.state.drawerOpen}
        >
          <div onClick={this.handleDrawerClose}>
            <IconButton onClick={this.handleDrawerClose}>
              <ChevronLeftIcon />
            </IconButton>
          </div>
          <Divider />
          <List>
            {['Home', 'Categories'].map((text, index) => (
              <ListItem button key={text}>
                <ListItemIcon>{index === 0 ? <HomeIcon /> : <MailIcon />}</ListItemIcon>
                <ListItemText primary={text} />
              </ListItem>
            ))}
          </List>
        </Drawer>

      </div>
    );
  }

}

有什么问题吗？我从 https://material-ui.com/components/drawers/ 复制了持久抽屉的示例。

看起来你的帖子主要是代码；请添加更多详细信息。看起来你的帖子主要是代码；请添加更多详细信息。看起来你的帖子主要是代码；请添加更多详细信息。

Answer 1

您的处理程序称为handleDrawerClosed，但您正在调用handleDrawerClose(末尾没有“d”)。

更新您的处理程序以匹配打开的处理程序并将其重命名为handleDrawerClose

此外，使用可以自动突出显示此类问题的 IDE，从而节省您的时间和挫败感 :-D