Comment arrêter le composant de lien de rediriger lorsqu'une icône de suppression est cliquée

Question

J'ai un composant de carte réutilisable qui me permet de rendre les détails de profil dans un composant de galerie. En cliquant sur l'une des cartes redirige vers les détails de profil de la personne en utilisant Link de react-router-dom. Maintenant, je veux ajouter une icône de suppression sur chaque carte pour permettre à l'utilisateur de supprimer l'un des profils.

Naturellement, en cliquant n'importe quoi dans les redirections de carte. Est-il possible d'éviter de rediriger, mais simplement de supprimer le profil lorsque l'icône delete est cliqué ou toute autre solution de contournement pour ce cas d'utilisation.

est ici l'extrait de code

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

aide est le plus apprécié!

Merci à l'avance

Answer 1

Une façon est en déplaçant l'icône quelque part en dehors du lien réagir-routeur. Par exemple.

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

De plus, étant que vous avez une classe member__card__body ${className} qui enveloppe le corps de carte, une autre façon est en faisant que l'image cliquable, qui est, enfermant l'image avec Link. De cette façon, l'utilisateur peut cliquer sur d'autres parties de la carte sans être redirigé. Par exemple.

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

J'espère que cela aide?

Answer 2

Une autre chose que je pense que vous pouvez faire est d'utiliser css. Vous pouvez ajouter une classe ou un ID au bouton delete et lui donner une position d'absolu et augmenter l'index z pour qu'il soit placé juste au-dessus.

Answer 3

Comme mentionné par @T Porter dans les commentaires, votre code span devrait être

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

Answer 4

je me suis dit que e.stopPropagation() n'a pas servi ce cas d'utilisation. Le correctif consistait à appeler preventDefault() dans la fonction removeFavorite.

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

Et pour le composant de la carte sur le site d'appel

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