リアクション - 子要素間でonmouseenterが機能しない

Question

ホバー上に表示されるメニューを実装しようとしています。問題はDropdownOption子要素の間にホバリングしながら、メニューが非表示になりますということですので、私はオプション1と2の間にカーソルを移動するたびにそれぞれの子にはdiv要素であり、これはイベントバブリングの問題のように聞こえる0PX

openDropdown =() => { 
    this.setState({showList: true}) 
    } 

    closeDropdown =() => { 
    this.setState({showList: false}) 
    } 

    showList =() => { 
    return (
     <DropdownContainer onMouseEnter={this.openDropdown} onMouseLeave={this.closeDropdown}> 
      <DropdownOption>Option1</DropdownOption> 
      <DropdownOption>Option2</DropdownOption> 
     </DropdownContainer> 
    ) 
    } 

render() { 
    return (
     <div onMouseEnter={this.openDropdown}> 
     <MenuButtonContainer> 
      Title 
     </MenuButtonContainer> 
     {this.state.showList ? this.showList() : null} 
     </div> 
    ) 
    } 

Answer 1

の余裕を持って。あなたのイベントリスナーのコールバックを持って

、例えば：

openDropdown =() => { 
    this.setState({showList: true}) 
} 

関数にパラメータとして含めるとeventオブジェクトにアクセスしてみてください。次に、イベントオブジェクトでstopPropagation()などを呼び出します。

openDropdown = (event) => { 
    event.stopPropagation() 
    this.setState({showList: true}) 
}