appbar材料ui中的下拉菜单项 - React答案

【问题标题】：Dropdown menu items in appbar material ui - Reactappbar材料ui中的下拉菜单项 - React
【发布时间】：2021-06-19 23:19:37
【问题描述】：

我在 React 应用程序中添加了 Material UI 打开菜单功能。但是，当您单击应用栏中的菜单项并出现下拉菜单时，它不会直接显示在菜单项下方。不知道我缺少什么，我已经包含了下面代码的 sn-p。谢谢

class Tester extends Component {


constructor(props){
    super(props)
    this.state = {
        placeholder: []
        
    }
    
}
openMenu(){
    this.setState({
        ...this.state,
        toggle: !this.state.toggle
    })
}




    return (
      <Link className={classes.tester}  onClick={() => 
       {this.openMenu(this.state.toggle)}}>
       Tester
        </Link>
        <Menu
        id="simple-menu"
                                
        open={this.state.toggle}
         onClose={() => {this.openMenu()}}>
                                        
        <MenuItem>Profile</MenuItem>
        <MenuItem >My account</MenuItem>
        <MenuItem >Logout</MenuItem>
        </Menu>
  )

【问题讨论】：

标签： reactjs navbar appbar

【解决方案1】：

菜单必须有一个锚点才能显示在该锚点旁边。该道具名为anchorEl。

您可以关注example from Material-UI docs：

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

【讨论】：