如何在 Reactstrap 中手动关闭下拉菜单？

Question

我正在使用 Reactstrap 中的下拉菜单。无论我点击哪里，这个下拉菜单都会关闭。但我想关闭我的下拉菜单，只需单击下拉菜单切换即可。

<Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
      <DropdownToggle caret>
        <strong>Licensing</strong>
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem href="/g1"><strong>G1 License</strong></DropdownItem>
        <DropdownItem divider />
        <DropdownItem href="/g2"><strong>G2 License</strong></DropdownItem>
        <DropdownItem divider />
        <DropdownItem href="/g3"><strong>G License</strong></DropdownItem>
      </DropdownMenu>
    </Dropdown>

我尝试从引导代码就像

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

但是没用。

Answer 1

我想你可以尝试:

<Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
      <DropdownToggle caret>
        <strong>Licensing</strong>
      </DropdownToggle>
      <DropdownMenu 
        persist={true}    
       >
        <DropdownItem href="/g1"><strong>G1 License</strong></DropdownItem>
        <DropdownItem divider />
        <DropdownItem href="/g2"><strong>G2 License</strong></DropdownItem>
        <DropdownItem divider />
        <DropdownItem href="/g3"><strong>G License</strong></DropdownItem>
      </DropdownMenu>
    </Dropdown>

我没有尝试过，但我认为这是个好方法。

在 DropdownMenu => props 中查找文档