Как в дочернем компоненте react для компонента Link реализовать аналог preventDefault?

Question

[Виктория Ерофеева]

Есть компонент PizzaBlock который формирует блок товаров. Это функциональный компонент с типом React.FC



В самом компоненте PizzaBlock у меня есть кнопка Добавить которая позволяет добавлять товар в корзину на основе обработчика onClick где вызывается функция добавления товара.

<button onClick={onClickAdd()}  className="button button--outline button--add">
       <span>Добавить</span>
       {addedCount > 0 && <i>{addedCount}</i>}
 </button>

Добавление в корзину отрабатывает нормально. Но возникает другая проблема каждый раз когда я кликаю на кнопку Добавить происходит переход на детальную страницу товара вместо того чтобы оставлять пользователя на странице списка товаров, это происходит из за того что в файле вывода списка товаров я обхожу массив данных используя Map и формирую список товаров где каждый товар (компонент PizzaBlock) у меня обернут в компонент Link

const pizzas = items.map((obj: any) => (
    	<Link key={obj.id} to={`/pizza/${obj.id}`}>
    		<PizzaBlock  {...obj} />
    	</Link>
    ));

Подскажите как сделать так чтобы переход на детальную страницу отрабатывал только в том случае если пользователь кликает на блок с товаром, но если он будет кликать на кнопку Добавить происходило только добавление товара в корзину, но сам Link не отрабатывал? Наверное нужен некий аналог Event.preventDefault() и Event.stopPropagation() которые есть в нативном JavaScript

Comments

[GlazOtca]

кстати, у вас тут
<button onClick={onClickAdd()}
функция onClickAdd срабатывает сразу, еще до нажатия на кнопку, потому что вы передаете не ссылку на ф-ю, а сразу её вызываете ()

[szQocks]

GlazOtca, ну это ей само собой надо убрать xD

[Виктория Ерофеева]

GlazOtca, можно подробнее? ссылка на функцию будет выглядить так - onClick={onClickAdd}

Answer 1

[szQocks]

просто вызови e.preventDefault в обработчике кнопки, зачем это надо ?

событие клик можно отменить - как будто и не было, если вывести в консоль лог e.cancelable и посмотреть если оно равно true то событие можно отменить дока