目前menuItem只在单击后打开您的孩子。是否有我同意通过悬停打开的属性?
<MenuItem key={index} menuItems={menuitems} **onHover={true}** > menuItem </MenuItem>
a6b3iqyw1#
在material-ui库中没有特定的属性,但是,你可以使用onMouseOver事件很容易地创建它。我改编了material-ui站点中的Simple Menu示例,向您展示了如何实现这一点:
onMouseOver
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;
jk9hmnmh2#
我通过增加按钮的z索引来使它工作。否则,当模态出现在按钮顶部时,鼠标从技术上离开按钮。然后菜单将关闭,因为用户不再悬停。如果你把onMouseLeave加到Menu上,那么onMouseLeave只会在你离开浏览器时触发,所以我把onMouseLeave加到MuiList上,这样就不会占据整个页面。我还在handleOpen中添加了一些额外的条件,以说明鼠标是否离开了按钮但进入了菜单。
onMouseLeave
Menu
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
xxslljrj3#
我在容器div上添加了mouseLeave监听器来关闭菜单,在菜单按钮上添加了mouseOver监听器来打开菜单。
<div onMouseLeave={closeMenu}> <button onMouseOver=(openMenu) /> <Menu /> <MenuItems /> </div>
3条答案
按热度按时间a6b3iqyw1#
在material-ui库中没有特定的属性,但是,你可以使用
onMouseOver
事件很容易地创建它。我改编了material-ui站点中的Simple Menu示例,向您展示了如何实现这一点:
jk9hmnmh2#
我通过增加按钮的z索引来使它工作。否则,当模态出现在按钮顶部时,鼠标从技术上离开按钮。然后菜单将关闭,因为用户不再悬停。
如果你把
onMouseLeave
加到Menu
上,那么onMouseLeave
只会在你离开浏览器时触发,所以我把onMouseLeave
加到MuiList
上,这样就不会占据整个页面。我还在
handleOpen
中添加了一些额外的条件,以说明鼠标是否离开了按钮但进入了菜单。CodeSandbox
xxslljrj3#
我在容器div上添加了mouseLeave监听器来关闭菜单,在菜单按钮上添加了mouseOver监听器来打开菜单。