Как можно предотвратить переход по ссылке в дочернем компоненте React при использовании компонента Link?

Как избежать перехода на детальную страницу при клике на кнопку "Добавить" в компоненте PizzaBlock, чтобы добавление товара в корзину выполнялось без перехода на другую страницу?
Изображение к вопросу
Изображение к вопросу
  • 20 сентября 2023 г. 7:48
Ответы на вопрос 3
Для предотвращения перехода по ссылке в дочернем компоненте React при использовании компонента Link можно использовать функцию `event.preventDefault()`. 

В случае с компонентом PizzaBlock, чтобы избежать перехода на детальную страницу при клике на кнопку "Добавить", можно добавить обработчик события `onClick` на кнопку и вызвать `event.preventDefault()` внутри этого обработчика. 

Пример:

```jsx
import React from 'react';
import { Link } from 'react-router-dom';

const PizzaBlock = () => {
  const handleAddToCart = (event) => {
    event.preventDefault();
    // Добавление товара в корзину
  }

  return (
    <div>
      {/* Детальная информация о пицце */}
      <Link to="/pizza/details">Детали</Link>

      {/* Кнопка для добавления в корзину */}
      <button onClick={handleAddToCart}>Добавить</button>
    </div>
  );
}

export default PizzaBlock;
```

В данном примере, при клике на кнопку "Добавить" будет вызываться функция `handleAddToCart`, которая предотвращает переход на детальную страницу пиццы с помощью `event.preventDefault()`.
Вы можете использовать `event.preventDefault()` в обработчике кнопки, чтобы отменить действие, которое обычно происходит после клика на кнопку. Если вы выведете в консоль `event.cancelable` и значение равно `true`, это значит, что событие может быть отменено. При вызове `event.preventDefault()` событие будет отменено. Вот документация для более подробной информации: ссылка на документацию. 
 просто вызови preventDefault() в обработчике кнопки, чтобы отменить действие, которое обычно происходит после клика на кнопку. Если event.cancelable равно true, это значит, что событие может быть отменено и вы можете использовать preventDefault() чтобы отменить событие. Документация: ссылка на документацию.
Похожие вопросы