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

Question

目前，menuItem 仅在单击后打开您的子项。是否有我同意通过悬停打开的属性？

<MenuItem key={index}
  menuItems={menuitems}
  **onHover={true}**
>
 menuItem
</MenuItem>

Answer 1

material-ui 库没有可用的特定属性。但是，您可以使用 onMouseOver 事件自己轻松创建此内容。

我已经改编了 Simple Menu example从material-ui 网站向您展示如何做到这一点:

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;