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

Posted 2023-03-23

【中文标题】如何在反应js中通过悬停切换多个下拉列表

【英文标题】：how to toggle multiple dropdown with hover in react js

【发布时间】：2020-04-14 00:59:48

【问题描述】：

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

【问题讨论】：

到目前为止你尝试过什么？如果你能在这里分享你的实现，那真的很有帮助。 :)

@SiddAjmera jsfiddle.net/froya20/264vmLos/3 这是我的代码

下拉菜单是动态创建的吗？

@lomse 不是，像组件一样创建

你能分享你的代码吗？这将使我们更容易为您提供帮助。

【参考方案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>

【讨论】：

谢谢你，我做到了，但不工作，你能把这段代码写在jsfiddle.net 网站并发送