没有 select 或按钮的 Reactstrap 下拉菜单

Question

我正在尝试构建菜单。如下所示：

我打算使用 bootstrap 的简单下拉菜单。但是我不知道该怎么做。我的 class 函数渲染方法中有以下内容：

<td style={{ width: 20, cursor: "pointer" }}>
  <Dropdown
    toggle={this.toggleMenu}
    isOpen={this.state.dropdownOpen}
  >
    <div>&bull;&bull;&bull;</div>
    <DropdownMenu>
      <DropdownItem>10</DropdownItem>
      <DropdownItem>25</DropdownItem>
      <DropdownItem>50</DropdownItem>
      <DropdownItem>100</DropdownItem>
    </DropdownMenu>
  </Dropdown>
</td>

我有以下 events/variables:

  constructor(props) {
    super(props);

    this.toggleMenu = this.toggleMenu.bind(this);
    this.state = {
      collapse: false,
      fadeIn: true,
      timeout: 300,
      dropdownOpen: false,
      debug: ""
    };
  }

  toggleMenu(e) {
    alert("sds");
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

我没有收到任何错误，也从未调用过 toggleMenu。我在这里遗漏了什么吗？

如果我使用 DropDownToggle，它会添加一个按钮：

Answer 1

而不是

<div>&bull;&bull;&bull;</div>

尝试像这样将 DropdownToggle 组件与 'tag' 属性一起使用：

<DropdownToggle tag="text">&bull;&bull;&bull;</DropdownToggle>

没有 select 或按钮的 Reactstrap 下拉菜单

Reactstrap dropdown without a select or button

reactjs

reactstrap