在 React 中单击卡片图标时阻止链接激活-解网

问：

我有一张卡片，包裹在 .里面是卡片的 div，div 是相对定位的。在卡片 div 内部是一个绝对位于卡片上的图标，单击该图标时应该会改变背景颜色。现在的问题是，单击图标也会单击我不想要的图标。我尝试使用，但它也会阻止所有后续事件再次正确触发，因为我希望能够在单击图标时随时翻转图标的背景颜色。我试过了，但它们似乎不起作用。Linkreact-router-dom@v5LinkLinke.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>

可能是什么问题？

JavaScript ReactJS 事件处理

我最初想做的是创建一张电影卡，其中包含一张图像和一个绝对位于卡片上的收藏图标，这是我有问题的那个。当用户单击收藏夹图标时，更改其背景以指示该图标已保存。将卡片包裹在卡片中将指向一个包含电影详细信息的页面。但我希望用户能够点击收藏夹图标，而不必先转到详细信息页面。Link

答：

0赞 Onoriode 9/18/2023 #1

Event.preventDefault()在提交表单时起作用，以防止页面重新加载。除此之外，不要点击链接标签，您应该从链接标签中删除img标签。react-router-dom

import { Link } from "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="/card-image.png" alt="original card image"/>
     </div>  
 </Link>
 <img src="/heart-icon.png" alt="heart icon" onClick={handleFavClick}/>
 </>
);
}

export default onClickFunction;

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

Prevent Link from activating on click on card icon in React

评论

评论