You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

MenuListComponent.js 731B

1234567891011121314151617181920212223242526
  1. import React, { useState } from 'react';
  2. import { Button, Menu, MenuItem } from '@mui/material';
  3. const MenuListComponent = () => {
  4. const [anchorEl, setAnchorEl] = useState(null);
  5. const open = Boolean(anchorEl);
  6. const handleClick = (event) => {
  7. setAnchorEl(event.currentTarget);
  8. };
  9. const handleClose = () => {
  10. setAnchorEl(null);
  11. };
  12. return (
  13. <div>
  14. <Button onClick={handleClick}>Menu List</Button>
  15. <Menu id="menu-list" anchorEl={anchorEl} open={open} onClose={handleClose}>
  16. <MenuItem onClick={handleClose}>Menu Item 1</MenuItem>
  17. <MenuItem onClick={handleClose}>Menu Item 2</MenuItem>
  18. <MenuItem onClick={handleClose}>Menu Item 3</MenuItem>
  19. </Menu>
  20. </div>
  21. );
  22. };
  23. export default MenuListComponent;