如何最好地阻止链接组件在单击删除图标时重定向

Question

我有一个可重复使用的卡片组件，它允许我在图库组件中呈现配置文件详细信息。单击任何卡片都会使用来自react-router-dom Link重定向到此人的个人资料详细信息。现在，我想在每张卡片上添加删除图标，以允许查看者删除任何配置文件。

可以理解的是，单击卡片中的任何内容都会重定向。有没有办法避免重定向，而只是在单击delete图标时删除配置文件或此用例的任何其他解决方法。

这是代码片段

const Card = ({ member, addTrash=false, removeFavorite }) => (
  <Link to={`/profiles/${member.user_id}`} className="member__card">
    <div className={`member__card__body ${className}`}>
     <img src={member.photo} alt={member.user_name} />
     {addTrash ? <span className="member__card__delete" onClick=
     {removeFavorite}><i className="fa fa-trash"></i></span> : null}
   </div>
   <div className="member__card__footer">
    <h3>{member.user_name}</h3>
    <p>{member.age} &bull; {member.location}</p>
   </div>
 </Link>
);

非常感谢帮助！

提前致谢

Answer 1

我发现e.stopPropagation()没有为这个用例服务。解决方法是在removeFavorite函数中调用preventDefault()。

removeFavorite = (id, e) => {
  e.preventDefault() // This did the fix
  this.props.deleteFavorite(id) // Delete the item
}

对于呼叫站点的卡组件

-------------
-------------
<Card member={{}} addTrash={true} removeFavorite={this.removeFavorite.bind(null, member.id}

Answer 2

一种方法是将图标移动到反应路由器链路之外的某个位置。例如。

const Card = ({ member, addTrash=false, removeFavorite }) => (
  <div>
    <Link to={`/profiles/${member.user_id}`} className="member__card">
      <div className={`member__card__body ${className}`}>
        <img src={member.photo} alt={member.user_name} />
      </div>
      <div className="member__card__footer">
        <h3>{member.user_name}</h3>
        <p>{member.age} &bull; {member.location}</p>
      </div>
    </Link>
    {addTrash ? <span className="member__card__delete" onClick=
    {removeFavorite}><i className="fa fa-trash"></i></span> : null}
  </div>
);

此外，由于您有一个包装卡体的类member__card__body ${className}，另一种方法是仅使图像可单击，即使用 Link 将图像括起来。这样，用户可以单击卡片的其他部分而不会被重定向。例如。

const Card = ({ member, addTrash=false, removeFavorite }) => (
  <div>
    <div className={`member__card__body ${className}`}>
      <Link to={`/profiles/${member.user_id}`} className="member__card">
        <img src={member.photo} alt={member.user_name} />
      </Link>
        {addTrash ? <span className="member__card__delete" onClick=
        {removeFavorite}><i className="fa fa-trash"></i></span> : null}
    </div>
    <div className="member__card__footer">
      <h3>{member.user_name}</h3>
      <p>{member.age} &bull; {member.location}</p>
    </div>
  </div>
);

我希望这有帮助？

Answer 3

正如@T Porter在评论中提到的，你的span代码应该是

{addTrash ? <span className="member__card__delete" onClick=
     {(e)=>{removeFavorite();e.stopPropagation();}><i className="fa fa-trash"></i></span> : null}

Answer 4

我认为你可以做的另一件事是使用css。您可以将类或 id 添加到delete按钮，并为其指定绝对位置并增加 z 索引以使其位于顶部。