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 的值以避免它觸發。

為什么要避免停止傳播 - 如果您向網頁添加分析工具，它們會依賴事件冒泡來捕獲數據。