handleНажмите в React

Question

У меня есть компонент MenuCard, который содержит handleClick, который возвращает имена и изображения различных меню. У меня также есть компонент LikeButton, который имеет счетчик и увеличивается при каждом нажатии кнопки.

У меня возникают проблемы при попытке использовать этот LikeButton в MenuCard, так как каждый раз, когда я нажимаю кнопку, он переходит к выбранному Страница идентификатора меню, которую он должен делать, если пользователь нажимает на карточку.

Но как мне избежать этого, когда я нажимаю LikeButton? Я просто не уверен, где вызывать LikeButton в MenuCard.

Компонент MenuCard:

import React from 'react';

import Card from 'react-bootstrap/Card'

import LikeButton from "../components/LikeButton";

const MenuCard = props => {

    const handleClick = () => {
        props.view(props.info.id, "menus", 'DISPLAY_MENUS');
    };

    return (
        <Card onClick={handleClick} style={{ width: '18rem' }}>
            <Card.Body>
                <Card.Title>{props.info.name}<LikeButton /></Card.Title>
            </Card.Body>
            <Card.Img variant="bottom" style={{ height: '12rem' }} src={props.info.image} />
        </Card>
    )
}

export default MenuCard 

Компонент LikeButton:

import React, { Component } from 'react';

import Button from 'react-bootstrap/Button'

class LikeButton extends Component {
  state = {
      count: 0
    }

increment = () => {
      let newCount = this.state.count + 1
      this.setState({
        count: newCount
      })
    }

render() {
  return (
   <div>
     <button onClick={this.increment}>Likes: {this.state.count} </button>
   </div>
  )
}

}

export default LikeButton;

Answer 1

Используйте event.stopPropagation в вашем LikeButton компоненте, чтобы предотвратить всплытие события onClick до MenuCard компонента:

<button 
  onClick={e => {
    e.stopPropagation();
    this.increment();
  }
>
Likes: {this.state.count}
</button>

Answer 2

Я бы предложил не использовать остановку распространения для решения этой проблемы. Вместо этого вы можете добавить идентификатор к кнопке «Мне нравится» и проверить значение event.target.id в меню, чтобы избежать его запуска.

почему следует избегать остановки распространения - если вы добавляете инструмент аналитики в свой веб-страницы, они полагаются на всплывающие события для сбора данных.