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})
}

，并且您的UncontrolDropdown应该呈现为

  <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>

如何在React JS中使用悬停切换多个下拉菜单

1 个答案: