如何在Reactstrap中实现仅通过切换按钮关闭的下拉菜单？

解决Reactstrap Dropdown仅点击Toggle关闭的问题 #

方法1：利用Reactstrap原生autoClose属性（推荐）

Reactstrap的Dropdown组件内置了autoClose属性，可直接控制关闭行为：

• 若需点击菜单内部不关闭，仅点击Toggle或外部区域关闭，设置autoClose="outside"
• 若需仅点击Toggle才关闭（外部点击也不触发），设置autoClose={false}

修改后的代码：

<Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} autoClose="outside">
  <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>

方法2：手动阻止菜单项事件冒泡（兼容旧版Reactstrap）

如果你的Reactstrap版本不支持autoClose，可以通过阻止DropdownItem的点击事件冒泡，避免触发菜单关闭逻辑：

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

原生Bootstrap写法无效的原因 #

Reactstrap是Bootstrap的React封装实现，通过自身状态（如isOpen）管理下拉菜单的显示/隐藏，原生Bootstrap的data-bs-*属性无法与Reactstrap的内部逻辑联动，因此直接添加data-bs-auto-close="false"不会生效。

内容的提问来源于stack exchange，提问作者Mustafa Selman ÖNAL