如何在反应js中通过悬停切换多个下拉列表

Question

我有多个下拉菜单，我想在其中一个鼠标悬停时切换，但它没有发生 我的代码链接：Link 我认为，可以发送 Id 并打开下拉列表，但我想要一个好的答案

Answer 1

你应该有 curDropdownID 而不是 dropdownOpen 标志，它可以是字符串或数字，现在我假设它是字符串，所以你的状态就像

 this.state = {
  collapsed: true ,
  curDropdownID: ''
};

您需要有 isopen 函数来决定菜单是否打开，如下所示：

isOpen=(id)=>{
    return this.state.curDropDownID===id
}

现在您切换菜单功能应该将 id 作为切换菜单的参数

 toggle(id) {    
   this.setState({curDropdownID:id})
}

并且您的 UncontrolledDropdown 应该呈现为

  <UncontrolledDropdown id="show" nav inNavbar onMouseOver={()=>{this.toggle('show')}} onMouseLeave={()=>{this.toggle('')}} isOpen={this.isOpen('show')} 
>
              <DropdownToggle nav caret className="text-dark">
                show
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem href='/Search'>
                  Search
                </DropdownItem>
              </DropdownMenu>
          </UncontrolledDropdown>