防止链接在 React 中单击卡片图标时激活

Question

我有一张卡片，包裹在

Link

中的

react-router-dom@v5

中。

Link

里面是卡片的div，div的位置是相对的。卡片 div 内有一个绝对位于卡片上的图标，单击该图标时应更改背景颜色。现在的问题是，单击图标也会单击我不想要的

Link

。我尝试使用

e.preventDefault()

但它也会阻止所有后续事件再次正确触发，因为我希望每次单击图标时都能够翻转图标的背景颜色。我尝试了

e.stopPropagation()

和

e.nativeEvent.stopImmediatePropagation

，但它们似乎不起作用。

我也浏览了几个SO答案，但似乎没有一个能解决我的问题。

 function handleFavClick(event) {
    event.stopPropagation();
    console.log(event);
 }

 <Link to={`/movies/${movie.id}`} key={movie.id}>

      <div 
        className="card"
        key={movie.id}
      >
        <img 
          src="/heart-icon.png"
          alt="heart icon"
          onClick={handleFavClick}
        />
        <img 
          src="/card-image.png"
          alt="original card image"

        />
      </div>  
 </Link>

可能是什么问题？

Answer 1

您的代码显示遵循此模式。 Event.preventDefault() 在提交表单时起作用，以防止页面重新加载。

从“react-router-dom”导入{链接}

const onClickFunction = () =>{

const handleFavClick = (event) =>{
    event.preventDefault() 
    console.log(event);
 }

return (
  <Link to={`/movies/${movie.id}`} key={movie.id}>
     <div className="card" key={movie.id}>
     <img src="/heart-icon.png" alt="heart icon" onClick={handleFavClick}/>
     <img src="/card-image.png" alt="original card image"/>
     </div>  
 </Link>
);

}

导出默认的onClickFunction；