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

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

一种方法是将图标移动到 react-router 之外的某个地方 Link。例如

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>
);

此外，由于您有一个 class 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 2

我认为您可以做的另一件事是使用 css。您可以向 delete 按钮添加一个 class 或一个 id，并为其指定一个绝对位置，并增加 z-index 使其位于顶部。

Answer 3

正如@T Porter 在评论中提到的，您的跨度代码应该是

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

Answer 4

我发现 e.stopPropagation() 不支持这个用例。解决方法是在 removeFavorite 函数中调用 preventDefault()。

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

而对于调用站点的 Card 组件

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

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

How best to stop Link component from redirecting when a delete icon is clicked

reactjs

react-router-dom