反应链接 OnClick 阻止 href答案

【问题标题】：React link OnClick prevent href反应链接 OnClick 阻止 href
【发布时间】：2019-02-28 08:53:16
【问题描述】：

我有一个带有 href 和 onClick 功能的链接。

<a href={menuItem.url}  onClick={e => {
 var checkedItems = document.querySelectorAll("input:checked") as NodeListOf<HTMLInputElement>;
      for (let i = 0; checkedItems[i]; i++) {
        checkedItems[i].checked = false;
      }
 window.location.href = menuItem.url;  }}>

我希望有 href 链接，以便用户在悬停时可以看到 url，但我只希望执行 onclick。我试过了

e.stopPropagation();
e.preventDefault();
e.nativeEvent.stopImmediatePropagation();
return false;

但这些似乎都不起作用。

【问题讨论】：

here 提出了类似的问题。尝试让您的 onclick 函数处理程序返回 false。
我也试过了，好像不行。我已将日志放在 onClick 中，但它没有被执行

标签： html reactjs preventdefault

【解决方案1】：

一种解决方案是在<a> 元素内添加一个新的“内部元素”，例如<span>，并将onClick 事件处理程序与event.stopPropagation() 绑定到该内部元素。

这将导致<span> 在点击事件冒泡到父<a> 之前拦截并停止传播（默认情况下，这将导致浏览器导航到href url）。

当鼠标悬停在用户上时，您应该会发现此方法仍然保留分配给<a> 的href 属性的url 的可见性：

<a href={menuItem.url}>
    <span onClick={e => {

        // Intercepts and prevents the event from propagating up to the parent <a>
        e.stopPropagation();

        // Your existing logic for the onClick event
        var checkedItems = document.querySelectorAll("input:checked") as NodeListOf<HTMLInputElement>;

        for (let i = 0; checkedItems[i]; i++) {
            checkedItems[i].checked = false;
        }

        window.location.href = menuItem.url;

    }}> The text label for your link </span>
</a>

为了使此方法起作用，它假定<a> 的框边框（外边界）和内部<span> 的框边框之间没有填充。 Here's a jsFiddle（非 jsx）展示了总体思路。

希望有帮助！

【讨论】：