Question

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

每次单击按钮时，尝试在MenuCard中使用此LikeButton时遇到问题，它会转到所选菜单的ID页，如果用户单击卡，应该执行该操作。

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

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

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

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

React中的handleClick

2 个答案: