如何使用 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>
)