Как открыть раскрывающееся меню под панелью приложений с помощью Material-UI?

Я новичок в Material-UI и только начал возиться со своей панелью приложений с примером меню. При переключении выпадающего меню оно открывается поверх самой панели приложений, а я бы хотел, чтобы оно открывалось под панелью навигации.

Из документов я понимаю, что это можно сделать с помощью Anchor EL как описано здесь. Но когда я реализую это в моем компоненте 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>
    );
  }
}

Ответ 1

Не уверен, если вам все еще нужен ответ для этого. (Кстати, ссылка больше не работает).

В любом случае, у меня была похожая проблема, и я заставил ее работать, установив свойства в самом меню следующим образом:

  <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}
  >

Мне пришлось вставить getContentAnchorEl={null} чтобы заставить работать вертикальные свойства, что я в итоге узнал из этой проблемы https://github.com/mui-org/material-ui/issues/7961.

Не уверен, как это сделать при использовании состояния для установки свойств элемента привязки, но, возможно, это поможет вам начать.

Ответ 2

это потому, что вы не определили якорь.

Атрибут Menu - anchorEl, отвечает за передачу местоположения кнопки, вызвавшей его, не совсем так, но только для того, чтобы его было легко понять.

Таким образом, вы должны ссылаться, когда есть щелчок. Я предлагаю вам использовать реакционные крючки, которые делают компонент чистым.

Реагировать с учетом состояния

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

оказывать

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

Ответ 3

В ответе Matheus есть ошибка, тип anchorEl не является логическим, в ReactHooks это должно быть:

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