如何使下拉菜单打开下面的 Appbar 使用材料用户界面？

我是材料用户界面的新手，刚刚开始摆弄他们的 应用程序栏菜单示例。当打开菜单下拉菜单时，它会在应用程序栏上打开，而我希望它在 Navbar 下面打开。

从文档中，我了解到这可以用 anchorEl来完成，就像 给你解释的那样。但是当我将这个实现到我的 menu组件时，什么也没有发生。什么是“正确的材料用户界面方式”来处理这个问题？

class Header extends React.Component {
state = {
auth: true,
anchorEl: null,
anchorOriginVertical: 'bottom',
anchorOriginHorizontal: 'right',
transformOriginVertical: 'top',
transformOriginHorizontal: 'right',
anchorReference: 'anchorEl',
};


handleChange = (event, checked) => {
this.setState({ auth: checked });
};


handleMenu = event => {
this.setState({ anchorEl: event.currentTarget });
};


handleClose = () => {
this.setState({ anchorEl: null });
};


render() {
const { classes } = this.props;
const { auth, anchorEl } = this.state;
const open = Boolean(anchorEl);


return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Typography type="title" color="inherit" className={classes.flex}>
Title
</Typography>
{auth && (
<div>
<IconButton
aria-owns={open ? 'menu-appbar' : null}
aria-haspopup="true"
onClick={this.handleMenu}
color="contrast"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
open={open}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
</Menu>
</div>
)}
</Toolbar>
</AppBar>
</div>
);
}
}
98054 次浏览
小开
最佳答案

I had a similar issue and the way I got it to work is by setting the properties on the menu itself like this:

  <Menu
id="menu-appbar"
anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin=\{\{ vertical: "bottom", horizontal: "center" }}
transformOrigin=\{\{ vertical: "top", horizontal: "center" }}
open={open}
onClose={this.handleClose}
className={props.classes.menu}
>

I had to put in getContentAnchorEl={null} to get the vertical properties to work, which I eventually learned from this issue https://github.com/mui-org/material-ui/issues/7961 .

Not sure how to do this when using the state to set the properties of the anchor element, but maybe this will get you started.

小开

it is because you have not defined the anchor.

The Menu attribute - anchorEl, is responsible for passing the location of the button that called it, not true to say this, but only to be easy to understand.

In this way, you should refer whenever there is a click. I suggest you use the reaction hooks, which makes the component clean.

React Stateful

const [menuOpen, setMenuOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(false)


const handleClick = (event) => {
const anchorEl = event.currentTarget
this.setState({ ...this.state, menuOpen: !menuOpen , anchorEl })

React Hooks

const [menuOpen, setMenuOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(false)


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

render

return (
<Menu
anchorEl={anchorEl}
open={menuOpen}
onClose={handleClick }
</Menu
)
小开

There is an error in Matheus answer, the type of anchorEl is not boolean, in ReactHooks it would need to be:

  const [menuOpen, setMenuOpen] = useState<boolean>(false);
const [anchorEl, setAnchorEl] = useState()


const recordButtonPosition = (event: any) => {
setAnchorEl(event.currentTarget);
setMenuOpen(true);
}


let closeMenu = () => {
setMenuOpen(false);
}


return (
<React.Fragment>
<Button onClick={recordButtonPosition}>
OPEN MENU
</Button>
<Menu
anchorEl={anchorEl}
open={menuOpen}
onClose={closeMenu}>
<MenuItem onClick={closeMenu}> ExampleMenuItem </MenuItem>
</Menu>
</React.Fragment>
);
小开

This was my solution, hope this will help someone.

<Menu
open={this.state.openProps}
anchorEl={this.state.anchorEl}
onClose={onClose}
className={classes.styles}
disableAutoFocusItem
PaperProps=\{\{
style: {
left: '50%',
transform: 'translateX(-77%) translateY(32%)',
}
}}
MenuListProps=\{\{
style: {
padding: 0,
},
}}
>
小开

All that stuff didn't work for me. So i gave the button an id and put it on the menu using javascript:

<IconButton id="btnPerfil" onClick={this.toggleMenuPerfilOpen}>
<AccountCircle color="inherit" />
</IconButton>
<Menu
anchorPosition=\{\{
vertical: 'top',
horizontal: 'center'
}}
anchorEl={document.getElementById('btnPerfil')}
keepMounted
open={this.state.isMenuPerfilOpen}
onClose={this.toggleMenuPerfilOpen}
>...</Menu>
小开

An easy way to achieve that is using useRef hook

  1. Create the ref
  2. insert your ref were you want to show the menu in your case a Div or other
  3. inser the ref in the anchor prop of the menu

enter code here

const inputEl = useRef(null);
<Mycomponent ref={inputEl}/>
<Menu
id="simple-menu"
anchorEl={inputEl.current}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>

for me this is by far the easier way

小开

For me i had issue of jumping effect , after clicking first time .. i had to make keepMounted={false}

and you can get x and y value by adjusting translateX(10px) translateY(50px) from devTool.

enter image description here

                      <div>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted={false}
open={Boolean(anchorEl)}
onClose={this.handleClose}
PaperProps=\{\{
style: {
transform: 'translateX(10px) translateY(50px)',
}
}}
>
<MenuItem onClick={this.handleClose}>My Account</MenuItem>
<Divider variant="middle"/>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</div>

小开

In the New Material-ui version 5, I don't understand why this weird thing happens. But it works when I create a separate menu component in the app bar.

import * as React from 'react';
import { useRouter } from 'next/router'
import { Menu, IconButton, } from '@mui/material';
import MenuItem from '@mui/material/MenuItem';
import AccountCircle from '@mui/icons-material/AccountCircle';


export default function AppBarMenu() {
const router = useRouter()
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleLogout = () => {
localStorage.clear()
router.push('/auth/login')
}
return (
<>
<IconButton
id="basic-button"
size="large"
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
>
<AccountCircle sx=\{\{ color: 'white' }} />
</IconButton>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps=\{\{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleLogout}>Logout</MenuItem>
</Menu>
</>
);
}

提交答案