Как я могу предотвратить запуск href с помощью React onClick?

Question

пытается создать элемент ссылки (<a> элемент) с href. Почему я использую href, а не меняю history? потому что я хочу, чтобы опция открывалась в новой вкладке в браузере.

Проблема в том, что у меня есть кнопка внутри элемента, и когда вы нажимаете на нее, она сразу же вызывает href, прежде чем даже получить stopProppagation или preventDefault внутри обработчика onClick кнопки. Это как 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>
)