反应按钮下拉菜单

Question

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

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

问题：

1. 在锚标记上将href设为＃可以通过附加＃来更改网址。 如果没有给出href，则将鼠标悬停在菜单上时不会在菜单上看到单击图标。 我不想更改URL，但同时我希望手形图标出现在下拉菜单中。

2. 我可以通过诸如preventDefault之类的方法来防止默认href行为吗？

3. 我应该使用react-bootstrap中的按钮还是这个本地html按钮？

Answer 1

只需为<a>标签添加样式，然后删除href属性。

a {
    cursor: pointer;
}

Answer 2

您可以使用CSS cursor: pointer;

 li{ cursor: pointer; } 

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