材質 UI 抽屜關閉

Question

我有一個材質 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 （ handleDrawerClose沒有“d”）。

更新您的處理程序以匹配打開的處理程序並將其重命名為handleDrawerClose

此外，使用 IDE 會自動為您突出顯示此類問題，並節省您的時間和挫折 :-D