Question

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

可以理解，点击卡中的任何内容都会重定向。有没有办法避免重定向，但只是在单击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>
);

另外，由于您有一个包裹卡体的类member__card__body ${className}，另一种方法是只使图像可点击，即用图片包围图像。这样，用户可以点击卡的其他部分而不被重定向。例如

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

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

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

Answer 3

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

Answer 4

我发现mysql> describe listings; +---------------+--------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +---------------+--------------+------+-----+---------+----------------+ | id | int(12) | NO | PRI | NULL | auto_increment | | owner_id | int(12) | NO | | NULL | | | property_type | int(12) | NO | | NULL | | | title | varchar(100) | NO | | NULL | | | description | text | NO | | NULL | | | yearbuilt | int(12) | NO | | NULL | | | beds | int(11) | NO | | NULL | | | baths | int(11) | NO | | NULL | | | sleeps | int(11) | NO | | NULL | | | sqfeet | int(12) | NO | | NULL | | | lotsize | int(12) | NO | | NULL | | | address1 | varchar(255) | NO | | NULL | | | address2 | varchar(255) | NO | | NULL | | | city | varchar(100) | NO | | NULL | | | state | int(12) | NO | | NULL | | | zipcode | varchar(50) | NO | | NULL | | | latitude | varchar(50) | NO | | NULL | | | longitude | varchar(50) | NO | | NULL | | | created | int(12) | NO | | NULL | | | updated | int(12) | NO | | NULL | | +---------------+--------------+------+-----+---------+----------------+ mysql> describe listings_facilities_xref; +-------------+---------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------------+---------+------+-----+---------+----------------+ | id | int(12) | NO | PRI | NULL | auto_increment | | listing_id | int(12) | NO | | NULL | | | facility_id | int(12) | NO | | NULL | | | category_id | int(12) | NO | | NULL | | +-------------+---------+------+-----+---------+----------------+没有提供此用例。解决方法是在e.stopPropagation()函数中调用preventDefault()。

removeFavorite

对于呼叫站点的卡组件

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

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

4 个答案: