React中onClick时的子菜单

Question

你好，我是新来的人，要做出反应并尝试完成该项目，我需要子菜单的帮助。我所拥有的是一个创建的工具栏，并带有一个方形图标，而我想要的是当我按下该图标时出现一个子菜单，如其下方的弹出菜单：

到目前为止，我已经编写了工具栏，并添加了这样的图标：

const toolbar = (props) => (
    <header>
        <ul className="Toolbar">
            <ul className="align-items">
            <li className="closer-to-sidebar"><img src = {square} alt="square icon"/></li>
            </ul>
        </ul>
    </header>
);

我只是有一个问题，不能找到任何相关的解决方案，任何帮助将不胜感激，谢谢]

Answer 1

您可以使用material-ui菜单。这是一个例子：

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

Source