Reactstrap Multi-Level Dropdown祖先不关闭

基础概念

Reactstrap 是一个基于 React 和 Bootstrap 的组件库，提供了许多常用的 UI 组件，包括 Dropdown（下拉菜单）。Multi-Level Dropdown 是指多级下拉菜单，即在一个下拉菜单中嵌套另一个下拉菜单。

类型

Reactstrap 的 Dropdown 组件主要有以下几种类型：

基本 Dropdown：最简单的下拉菜单。
Multi-Level Dropdown：多级下拉菜单。
Dropdown Toggle：用于切换下拉菜单的按钮。
Dropdown Menu：下拉菜单的内容部分。

应用场景

Multi-Level Dropdown 常用于需要多层次导航的场景，例如：

大型网站的导航栏，包含多个子菜单。
复杂的应用程序，需要多层次的操作选项。

问题：祖先不关闭

原因：

在使用 Reactstrap 的 Multi-Level Dropdown 时，如果祖先 Dropdown 不关闭，通常是因为事件冒泡导致的。当子菜单的点击事件冒泡到祖先菜单时，祖先菜单的关闭逻辑没有被正确触发。

解决方法：

可以通过阻止事件冒泡来解决这个问题。在子菜单的点击事件处理函数中，使用 event.stopPropagation() 阻止事件冒泡。

示例代码

import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

class MultiLevelDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dropdownOpen: false,
      subDropdownOpen: false,
    };
  }

  toggle = (openKey) => () => {
    this.setState({
      [openKey]: !this.state[openKey],
    });
  };

  render() {
    return (
      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle('dropdownOpen')}>
        <DropdownToggle caret>
          Dropdown
        </DropdownToggle>
        <DropdownMenu right>
          <DropdownItem onClick={this.toggle('subDropdownOpen')}>
            Sub Dropdown
          </DropdownItem>
          <Dropdown isOpen={this.state.subDropdownOpen} toggle={this.toggle('subDropdownOpen')}>
            <DropdownToggle caret>
              Sub Dropdown Content
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem onClick={(e) => { e.stopPropagation(); }}>
                Sub Item 1
              </DropdownItem>
              <DropdownItem onClick={(e) => { e.stopPropagation(); }}>
                Sub Item 2
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

export default MultiLevelDropdown;