подменю при onClick в React - PullRequest
Новая
       67

подменю при onClick в React

0 голосов
/ 27 мая 2020

привет, ребята, я новичок в реакции и пытаюсь go завершить и sh этот проект, мне нужна помощь с подменю. у меня есть созданная панель инструментов с квадратным значком, и я хочу, чтобы когда я нажимал на этот значок, появлялось подменю, подобное этому всплывающему меню под ним:

пока что я написал панель инструментов и добавил значок вроде этого: 

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>
);

У меня просто проблема с этим, и я не могу найти подходящего решения, любая помощь будет очень признательна, спасибо

1 Ответ

0 голосов
/ 27 мая 2020

вы можете использовать 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>
  );
}

Источник

...