Question

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

// Your controller
$scope.editProductDetail = function(productObject) {
    $scope.setDisplayBlock = true;
    $scope.getProduct  = productObject;
}

// Your HTML
<a href="#" ng-click="editProductDetail(list)" target="_self"></a>
<span id="editProduct" ng-class="{'css-class-with-display-block': setDisplayBlock}">The element to change</span>

问题：

在锚标签上将href设为＃会通过附加＃来更改网址。如果未给出href，则将鼠标悬停在菜单上时，不会在菜单上看到手动点击图标。我不想更改网址，同时我希望手形图标出现在下拉菜单中。
我可以通过某些方法阻止默认的href行为，例如preventDefault或类似的东西吗？
我应该使用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>

反应按钮下拉菜单

2 个答案: