reactjs 材质-ui:通过事件悬停打开菜单

afdcj2ne  于 2022-11-04  发布在  React
关注(0)|答案(3)|浏览(182)

目前menuItem只在单击后打开您的孩子。是否有我同意通过悬停打开的属性?

<MenuItem key={index}
  menuItems={menuitems}

**onHover={true}**

>
 menuItem
</MenuItem>
a6b3iqyw

a6b3iqyw1#

在material-ui库中没有特定的属性,但是,你可以使用onMouseOver事件很容易地创建它。
我改编了material-ui站点中的Simple Menu示例,向您展示了如何实现这一点:

import React from 'react';
import Button from 'material-ui/Button';
import Menu, { MenuItem } from 'material-ui/Menu';

class SimpleMenu extends React.Component {
  state = {
    anchorEl: null,
    open: false,
  };

  handleClick = event => {
    this.setState({ open: true, anchorEl: event.currentTarget });
  };

  handleRequestClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div>
        <Button
          aria-owns={this.state.open ? 'simple-menu' : null}
          aria-haspopup="true"
          onClick={this.handleClick}

          { // The following line makes the menu open whenever the mouse passes over the menu }
          onMouseOver={this.handleClick}
        >
          Open Menu
        </Button>
        <Menu
          id="simple-menu"
          anchorEl={this.state.anchorEl}
          open={this.state.open}
          onRequestClose={this.handleRequestClose}
        >
          <MenuItem onClick={this.handleRequestClose}>Profile</MenuItem>
          <MenuItem onClick={this.handleRequestClose}>My account</MenuItem>
          <MenuItem onClick={this.handleRequestClose}>Logout</MenuItem>
        </Menu>
      </div>
    );
  }
}

export default SimpleMenu;
jk9hmnmh

jk9hmnmh2#

我通过增加按钮的z索引来使它工作。否则,当模态出现在按钮顶部时,鼠标从技术上离开按钮。然后菜单将关闭,因为用户不再悬停。
如果你把onMouseLeave加到Menu上,那么onMouseLeave只会在你离开浏览器时触发,所以我把onMouseLeave加到MuiList上,这样就不会占据整个页面。
我还在handleOpen中添加了一些额外的条件,以说明鼠标是否离开了按钮但进入了菜单。

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({});
const MyMenu = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [open, setOpen] = useState(false);

  const handleOpen = (event) => {
    setAnchorEl(event.currentTarget);
    setOpen(true);
  };

  const handleClose = (e) => {
    if (e.currentTarget.localName !== "ul") {
      const menu = document.getElementById("simple-menu").children[2];
      const menuBoundary = {
        left: menu.offsetLeft,
        top: e.currentTarget.offsetTop + e.currentTarget.offsetHeight,
        right: menu.offsetLeft + menu.offsetWidth,
        bottom: menu.offsetTop + menu.offsetHeight
      };
      if (
        e.clientX >= menuBoundary.left &&
        e.clientX <= menuBoundary.right &&
        e.clientY <= menuBoundary.bottom &&
        e.clientY >= menuBoundary.top
      ) {
        return;
      }
    }

    setOpen(false);
  };

  theme.props = {
    MuiList: {
      onMouseLeave: (e) => {
        handleClose(e);
      }
    }
  };
  return (
    <div>
      <ThemeProvider theme={theme}>
        <Button
          id="menubutton1"
          aria-owns={open ? "simple-menu" : null}
          aria-haspopup="true"
          onMouseOver={handleOpen}
          onMouseLeave={handleClose}
          style={{ zIndex: 1301 }}
        >
          Open Menu
        </Button>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={open}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "center"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "center"
          }}
        >
          Menu
          <br />
          Items
        </Menu>
      </ThemeProvider>
    </div>
  );
};

export default MyMenu;

CodeSandbox

xxslljrj

xxslljrj3#

我在容器div上添加了mouseLeave监听器来关闭菜单,在菜单按钮上添加了mouseOver监听器来打开菜单。

<div onMouseLeave={closeMenu}>
 <button onMouseOver=(openMenu) />
 <Menu />
 <MenuItems />
</div>

相关问题