Reactjs 如何使链接与卡img重叠工作

我的项目有问题。我创建了一个卡片img覆盖，在图像上显示图标。如果您单击整个图像，您将被重定向到帖子。我想让喜欢和分享图标点击

我的项目正在进行中。我正在显示来自RedditAPI的图像和视频

谢谢你的帮助

  id,
  slugTitle,
  title,
  url_overridden_by_dest,
  author,
  preview,
}) => {
  const [isVideo, setIsVideo] = useState(false);
  useEffect(() => {
    if (preview) setIsVideo(preview.split('.').pop() === 'mp4');
  }, [preview]);
  const history = useHistory();

  const goToPage = () => {
    history.push(`/Post/${id}/${slugTitle}`);
  };

  return (
    <Card
      inverse
      onClick={goToPage}
      style={{
        cursor: 'pointer',
      }}
    >
      {isVideo && (
        <video autoPlay="false" loop width="100%" src={preview}>
          <track default kind="captions" />
        </video>
      )}
      {!isVideo && (
        <CardImg top width="100%" src={url_overridden_by_dest} alt={title} />
      )}
      <CardImgOverlay className="hideinfos">
        <CardText className="w-100 d-flex justify-content-between">
          <div>
            <VscAccount className="mr-2" size={20} />
            {author}
          </div>
          <div>
            <LikeButtonhp
              className="mr-2 card-link"
              size={20}
              style={{
                position: 'relative',
              }}
            />
            <BiShareAlt size={20} />
          </div>
        </CardText>
      </CardImgOverlay>
    </Card>
  );
};

id，
标题，
标题
url被目的地覆盖，
作者
预览
}) => {
const[isVideo，setIsVideo]=useState（false）；
useffect（（）=>{
if（preview）setIsVideo（preview.split（'.'）.pop（）=='mp4'）；
}，[预览]；
const history=useHistory（）；
常数goToPage=（）=>{
push（`/Post/${id}/${slugTitle}`）；
};
返回(
{isVideo&&(
)}
{！isVideo&&(
)}
{作者}
);
};

您需要在

组件（如按钮HP

和

BiShareAlt

组件）上单击

处理程序，然后使用
事件.stopPropagation（）
阻止事件冒泡到
：

在我的onClick中，我添加了一个e.stopPropagation（）；它解决了我的问题。现在，我可以点击心脏图标，它的工作。它会停止在我的映像（父映像）上设置onClick

函数，如按钮hp（）{
const[liked，setLiked]=useState（false）；
返回(
{
e、 停止传播（）；
setLiked（！liked）；
}}
样式={{color:'white'}}
>
{喜欢？：}
);
}
你好，马特，谢谢你的帮助。它解决了我的问题。
<BiShareAlt
    size={20}
    onClick={event => {
        event.stopPropagation();
        // Do stuff for share click
    }}
/>

const BiShareAlt = ({ onClick }) => (
    <button onClick={onClick}>
        Share
    </button>
);

export default BiShareAlt;

function LikeButtonhp() {
  const [liked, setLiked] = useState(false);
  return (
    <Button
      outline
      color="link"
      className="likebutton"
      onClick={(e) => {
        e.stopPropagation();
        setLiked(!liked);
      }}
      style={{ color: 'white' }}
    >
      {liked ? <BsHeartFill size={20} /> : <BsHeart size={20} />}
    </Button>
  );
}