마우스 오버시 메뉴 열기 반응 내 마우스 리브 메뉴 닫기

Question

방금 ​​반응이 시작되었습니다. 현재 nav-bar에서 material-ui를 사용하고 반응하고 있습니다. 메뉴 위로 마우스를 가져 가면 드롭 다운이 표시됩니다. 그러나 드롭 다운을 닫으려면 드롭 다운의 바깥 쪽을 클릭해야합니다. 드롭 다운에서 마우스를 가져 가거나 다른 메뉴 옵션으로 이동하면 드롭 다운을 닫을 수 있기를 원합니다 (이 경우 다른 드롭 다운이 표시되어야 함). 이 같은 것 : https://www.palantir.com/

나는 주위를 둘러 보았지만 해결책을 찾지 못했습니다. 이것은 내가 가진 가장 가까운 것입니다 : Material-ui: open menu by event hover

동일한 기술을 사용하여 시도하고 내 코드에 이것을 추가했지만 아무 소용이 없습니다. 어떤 제안? 감사!

편집 : 여기에서 내 문제를 재현했습니다 : https://react-xmaiyw.stackblitz.io '왜 우리'인지를 클릭하면 문제가 발생할 수 있습니다.

handleClick = (event) => { 
event.preventDefault(); 

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

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

render() { 
return (
    <FlatButton 
    onClick={this.handleClick} 
    onMouseOver={this.handleClick} 
    onMouseLeave={this.handleRequestClose} //When I add this line of 
    //code, it keeps flickering very fast almost as if drop-down 
    //doesn't open 
    label="Why Us?" 
/> 
)} 

Answer 1

깜박 거리는 것은 마우스 아래의 메뉴 열기로 인해 발생합니다. 메뉴가 열리면 마우스가 더 이상 버튼 위에 있지 않으므로 mouseleave 이벤트를 묻는 메시지가 나타나 메뉴를 닫습니다. 그러면 마우스가 다시 버튼 위에 오게되어 mouseenter 이벤트가 나타나 메뉴를 엽니 다. 등등.

마우스가있는 곳을 추적하기위한 추가 논리와 사용자가 단추와 메뉴 사이에서 마우스를 이동할 시간을 가지도록하는 시간 제한을 사용하여 원하는 것을 달성 할 수 있습니다.

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

const timeoutLength = 300; 

class SimpleMenu extends React.Component { 
    state = { 
    anchorEl: null, 

    // Keep track of whether the mouse is over the button or menu 
    mouseOverButton: false, 
    mouseOverMenu: false, 
    }; 

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

    handleClose =() => { 
    this.setState({ mouseOverButton: false, mouseOverMenu: false }); 
    }; 

    enterButton =() => { 
    this.setState({ mouseOverButton: true }); 
    } 

    leaveButton =() => { 
    // Set a timeout so that the menu doesn't close before the user has time to 
    // move their mouse over it 
    setTimeout(() => { 
     this.setState({ mouseOverButton: false }); 
    }, timeoutLength); 
    } 

    enterMenu =() => { 
    this.setState({ mouseOverMenu: true }); 
    } 

    leaveMenu =() => { 
    setTimeout(() => { 
     this.setState({ mouseOverMenu: false }); 
    }, timeoutLength); 
    } 

    render() { 
    // Calculate open state based on mouse location 
    const open = this.state.mouseOverButton || this.state.mouseOverMenu; 

    return (
     <div> 
     <Button 
      aria-owns={this.state.open ? 'simple-menu' : null} 
      aria-haspopup="true" 
      onClick={this.handleClick} 
      onMouseEnter={this.enterButton} 
      onMouseLeave={this.leaveButton} 
     > 
      Open Menu 
     </Button> 
     <Menu 
      id="simple-menu" 
      anchorEl={this.state.anchorEl} 
      open={open} 
      onClose={this.handleClose} 
      MenuListProps={{ 
      onMouseEnter: this.enterMenu, 
      onMouseLeave: this.leaveMenu, 
      }} 

     > 
      <MenuItem onClick={this.handleClose}>Profile</MenuItem> 
      <MenuItem onClick={this.handleClose}>My account</MenuItem> 
      <MenuItem onClick={this.handleClose}>Logout</MenuItem> 
     </Menu> 
     </div> 
    ); 
    } 
} 

export default SimpleMenu; 

은 내가 Menu 구성 요소가 마우스 이벤트에 이상한 효과를 보이지 않는 ( disply: none) 전환 요소의 무리가 포함되어 있기 때문에 MenuList 자체에 직접 mouseEnter 및 mouseLeave 이벤트를 설정 MenuListProps을 사용했다. MenuList은 실제로 표시되는 요소이므로 직접 마우스 이벤트를 설정하는 것이 좋습니다.

원활한 재생을 위해 timeoutLength으로 전환해야하고 전환이 필요할 수 있습니다.