React 中的 handleClick

Question

我有一个 MenuCard 组件，它包含一个 handleClick，它返回各种菜单的名称和图像。 我还有一个 LikeButton 组件，它有一个计数器，每次按下按钮时都会递增。

我在尝试在 MenuCard 中使用这个 LikeButton 时遇到问题，因为每次我单击该按钮时，它都会转到所选菜单的 id 页面，如果用户单击该卡，它应该这样做。

但是，当我单击 LikeButton 时，如何避免这种情况发生？ 我只是不确定在 MenuCard 中在哪里调用 LikeButton。

菜单卡组件：

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

在LikeButton组件中使用event.stopPropagation来防止onClick事件冒泡到MenuCard组件：

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

Answer 2

我建议不要使用停止传播来处理这个问题。 相反，您可以向喜欢按钮添加一个 id，并在菜单单击中检查 event.target.id 的值以避免它触发。

为什么要避免停止传播 - 如果您向网页添加分析工具，它们会依赖事件冒泡来捕获数据。