Reactstrap Multi-Level Dropdown祖先不关闭

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;