我对Material UI不太熟悉,刚开始摆弄他们的App bar with Menu example.切换菜单下拉菜单时,它会在应用程序栏上方打开,而我希望它在导航栏下方打开.
从文档中,我了解到这可以用anchorEl
来完成,正如here所解释的那样.但当我把这个应用到menu
组件时,什么都没发生.什么是"正确的material UI方式"来解决这个问题?
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>
);
}
}