没有选择或按钮的 Reactstrap 下拉菜单

Posted 2023-03-23

【中文标题】没有选择或按钮的 Reactstrap 下拉菜单

【英文标题】：Reactstrap dropdown without a select or button

【发布时间】：2020-04-28 01:04:51

【问题描述】：

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

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

<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>

我有以下事件/变量：

  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 它会添加一个按钮：

【问题讨论】：

截图和你的描述，没有说清楚你想做什么，有什么问题，你切换应该在悬停上工作？

我希望在单击 ••• 时出现一个下拉菜单。那是树点的。问题是当我单击 3 个点时没有任何反应。

<DropdownToggle>•••</DropdownToggle>

那是我的第一个实现。但它添加了一个按钮（就像它被实现为一个选择按钮）。我用屏幕截图更新了我的帖子。

好的，你让我朝着正确的方向前进。你可以添加一个答案吗？我按照你所说的使用 做了。属性标签可以确定承载这个的标签。做到了。谢谢。

【参考方案1】：

代替

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

尝试将 DropdownToggle 组件与 'tag' 属性一起使用，如下所示：

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