反應按鈕下拉菜單

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>