マウスオーバー時にメニューを開き、反応中のマウスリーブ上でメニューを閉じる

Question

私はちょうど反応でめっきを始めました。私は現在、材料-uiを使用してnavbarに取り組み、反応しています。メニューの上にマウスを置くと、ドロップダウンが表示されます。しかし、ドロップダウンを閉じるには、ドロップダウンの外側をクリックする必要があります。ドロップダウンから移動したり、別のメニューオプションに移動したりすると、ドロップダウンを閉じることができます（別のドロップダウンが表示されるはずです）。このようなもの：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; 

IはMenuコンポーネントがマウスイベントに奇妙な効果を有する不可視（disply: none）遷移元素の束を含んでいるのでMenuList自体に直接mouseEnterとmouseLeaveイベントを設定するMenuListPropsを使用します。 MenuListは実際に表示される要素なので、直接マウスイベントを設定するのが理にかなっています。

おそらく、timeoutLengthとトランジションで遊んで、すべてがスムーズに見えるようにする必要があります。