如何获得可重用的菜单组件？

Question

我正在尝试设置一个只有 AppBar 的简单 React 应用程序，我希望在单击应用程序栏项目时打开一个菜单，我使用 material-ui 进行样式设置。 当我第一次单击“项目”或“编辑”项时，菜单成功显示，但不知道如何处理此菜单的关闭。 您可以在codeandbox.io上找到工作示例。

请注意，维护目录结构是必不可少的。

appbaritems.js

import React, { Component } from "react";
import { Button, ButtonGroup } from "@material-ui/core";
import MenuContent from "./menucontent";

class AppBarItems extends Component {
  constructor() {
    super();
    this.state = { menuAnchor: null };
  }

  handleClick = (event) => {
    this.setState({ menuAnchor: event.currentTarget });
  };
  handleClose = () => {
    this.setState({ menuAnchor: null });
  };
  render = () => {
    return (
      <div>
        <ButtonGroup
          variant="contained"
          color="primary"
          aria-label="contained primary button group"
        >
          <Button
            className="dense toolbarbutton"
            disableElevation
            onClick={this.handleClick}
          >
            Project
          </Button>
          <Button
            className="dense toolbarbutton"
            disableElevation
            onClick={this.handleClick}
          >
            Edit
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            View
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Layer
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Settings
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Plugin
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Vector
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Raster
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Database
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Web
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Processing
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Help
          </Button>
        </ButtonGroup>
        <MenuContent anchorEl={this.state.menuAnchor} />
      </div>
    );
  };
}

export default AppBarItems;

meucontent.js

import React, { Component } from "react";
import { Menu, MenuItem } from "@material-ui/core";

class MenuContent extends Component {
  handleClose = () => {
    console.log("Don't know how to handle closing of this menu");
  };
  render = () => {
    return (
      <Menu
        elevation={0}
        anchorEl={this.props.anchorEl}
        open={Boolean(this.props.anchorEl)}
        onClose={this.handleClose}
      >
        <MenuItem>Item 1</MenuItem>
        <hr />
        <MenuItem>Item 2</MenuItem>
        <hr />
        <MenuItem>Item 3</MenuItem>
      </Menu>
    );
  };
}

export default MenuContent;

Answer 1

您可以利用AppBarItems组件中的handleClose方法。 只需将此作为道具传递给MenuContent

<MenuContent anchorEl={this.state.menuAnchor} handleClose={this.handleClose} />

在MenuContent ，执行该道具onClose

<Menu
  elevation={0}
  anchorEl={this.props.anchorEl}
  open={Boolean(this.props.anchorEl)}
  onClose={this.props.handleClose}
>

如果你需要的Menu时关闭菜单项被点击，以及，你可以使用相同的道具onClick一个的MenuItem

<MenuItem onClick={this.props.handleClose}>Item 1</MenuItem>