反应按钮下拉菜单答案

【问题标题】：React button dropdown menu反应按钮下拉菜单
【发布时间】：2018-02-21 06:39:59
【问题描述】：

在我的反应应用程序中，其中一个组件正在创建一个按钮下拉菜单，如下所示。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a onClick=doSomething href="#">HTML</a></li>
      <li><a onClick=doSomething href="#">CSS</a></li>
      <li><a onClick=doSomething href="#">JavaScript</a></li>
    </ul>   
</div>

问题：

在锚标记上将 href 指定为 # 会通过附加 # 来更改 url。如果未给出href，则将鼠标悬停在菜单上时不会在菜单上看到手动单击图标。我不想更改 URL，同时我希望手形图标出现在下拉菜单中。
我可以通过诸如 preventDefault 或类似的方法来阻止默认的 href 行为吗？
我应该使用 react-bootstrap 中的按钮还是这个原生 html 按钮可以？

【问题讨论】：

尝试将此 CSS 规则应用于锚标记：cursor: pointer;

标签： javascript html twitter-bootstrap reactjs react-router

【解决方案1】：

您可以使用 CSS cursor: pointer;

li{
  cursor: pointer;
}

 <ul class="dropdown-menu">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

【讨论】：

li有onclick回调吗？
目前没有，只是一个 CSS 规则。您可以像任何 DOM 元素一样添加 onClick 处理程序。

【解决方案2】：

只需为<a> 标签添加样式并删除您的href 属性。

a {
    cursor: pointer;
}

【讨论】：