web-dev-qa-db-fra.com

Comment ouvrir un menu déroulant sous la barre d'applications à l'aide de Material-UI?

Je suis nouveau sur Material-UI et je viens de commencer à jouer avec leur barre d'application avec exemple de men . Lorsque vous basculez dans le menu déroulant, il s'ouvre sur l'Appbar elle-même, alors que j'aimerais qu'il s'ouvre sous la Navbar.

D'après les documents, je comprends que cela peut être fait avec Anchor EL comme expliqué ici . Mais quand j'implémente ceci à mon composant menu, rien ne se passe. Quelle est la "bonne façon d'utiliser l'interface matérielle" pour y remédier?

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>
    );
  }
}
reactjsmaterial-ui
17
Stiño

Je ne sais pas si vous avez toujours besoin d'une réponse pour cela. (Le lien ne fonctionne plus btw).

Quoi qu'il en soit, j'ai eu un problème similaire et la façon dont je l'ai fait fonctionner est de définir les propriétés sur le menu lui-même comme ceci:

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

Je devais mettre getContentAnchorEl={null} pour que les propriétés verticales fonctionnent, ce que j'ai finalement appris de ce problème https://github.com/mui-org/material-ui/issues/7961 .

Vous ne savez pas comment procéder lorsque vous utilisez l'état pour définir les propriétés de l'élément d'ancrage, mais cela vous aidera peut-être à démarrer.

24
Emmy

Il y a une erreur dans la réponse Matheus, le type de anchorEl n'est pas booléen, dans ReactHooks il devrait être:

  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>
  );
1
Angel Igareta

c'est parce que vous n'avez pas défini l'ancre.

L'attribut Menu - anchorEl, est chargé de transmettre l'emplacement du bouton qui l'a appelé, ce n'est pas vrai pour le dire, mais seulement pour être facile à comprendre.

De cette façon, vous devez vous référer à chaque clic. Je vous suggère d'utiliser les crochets de réaction, ce qui rend le composant propre.

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

rend

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