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;