如何使用 React onClick 防止 href 触发？

Question

尝试使用href制作链接元素（ <a>元素）。 为什么我使用href而不是更改history ？ 因为我想要在浏览器的新标签页中打开的选项。

问题是，我在元素中有一个按钮，当你点击它时，它会立即触发href ，甚至在按钮的onClick处理程序中停止stopProppagation或preventDefault之前。 这就像 2 种不同的事件类型……

像这样：

...
const onButtonClick = (event) => {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    event.preventDefault();
    if (clickDisabled) return;
    if (!onClick) return;
    onClick(event);
}

return (
    <a href={someHref}>
        <button onClick={onButtonClick}>open menu</button>
    </a>
)

有任何想法吗？

Answer 1

我最终使用的解决方法是：而不是按钮onClick - 我使用了onMouseDown ，它发生在href触发器之前。 不是最好的解决方案，但对我来说已经足够了。

Answer 2

const onButtonClick = (event) => {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    if (clickDisabled) return;
    if (!onClick) return;
    onClick(event);
}


const handleLink = (e) => {
    e.preventDefault();
    window.open('https://URL...', '_blank');
  }

   return (
    <a href={someHref} onClick={handleLink}>
        <button onClick={onButtonClick}>open menu</button>
    </a>
)