Material-ui：イベントホバーでメニューを開く

Question

現在、menuItemは、クリック後にのみあなたの子供を開きます。ホバー経由で開くことに同意する属性はありますか？

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

Answer 1

material-uiライブラリでは特定の属性はありません。ただし、onMouseOverイベントを使用すると、これを簡単に作成できます。

私はこれを行う方法をお見せするために材料-UIサイトからSimple Menu exampleを適応してきました：

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;