我刚开始反应。很抱歉乱码。但是当我通过单击配置文件按钮打开菜单时,它会打开菜单弹出到页面的左上角。有人能帮我把它放在个人资料按钮下面吗?在开发人员工具中检查控制台。警告来了。提供给组件的 anchorEl
属性无效。
function NavBar(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const AppBars = withStyles({
root: {
background: "black",
height: "55px",
position: "sticky",
alignItems: "center"
}
})(AppBar);
const MainButtons = withStyles({
root: {
background: "black",
color: "white",
marginTop: "10px",
marginLeft: "25px",
marginRight: "25px",
"&:hover": {
background: "Grey",
color: "white",
},
//label: {
// textTransform: "italiac"
// }
}
})(Button);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return ( <
div className = "header_div" >
<
AppBars >
<
div className = "buttn_div" >
<
MainButtons variant = "contained"
className = "main_buttons" > Dashboard < /MainButtons> <
MainButtons variant = "contained"
className = "main_buttons" > Dashboard < /MainButtons> <
MainButtons variant = "contained"
className = "main_buttons" > Dashboard < /MainButtons> <
MainButtons variant = "contained"
className = "main_buttons" > Dashboard < /MainButtons> <
/div> <
div className = "prof_button" >
<
MainButtons variant = "contained"
aria - controls = "simple-menu"
aria - haspopup = "true"
onClick = {
handleClick
} >
<
AccountCircleIcon / > Profile <
/MainButtons> <
/div> <
Menu id = "simple-menu"
anchorEl = {
anchorEl
}
color = "inherit"
open = {
Boolean(anchorEl)
} >
<
MenuItem color = "inherit"
onClick = {
handleClose
} > Profile < /MenuItem> <
MenuItem color = "inherit"
onClick = {
handleClose
} > My account < /MenuItem> <
MenuItem color = "inherit"
onClick = {
handleClose
} > Logout < /MenuItem> <
/Menu>
<
/AppBars >
<
/div >
);
}