削除アイコンをクリックしたときにリンクコンポーネントがリダイレクトされないようにするにはどうすればいいですか

Question

ギャラリーコンポーネントのプロファイルの詳細をレンダリングできる再利用可能なカードコンポーネントがあります。いずれかのカードをクリックすると、から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

一つの方法は、反応し、ルータをリンク外のどこかにアイコンを移動することです。 例

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

あなたができると思うもう一つのことは、CSSを使用することです。 deleteボタンにクラスまたはIDを追加して、絶対位置を指定してZ-インデックスを上げて、右上に座らせることができます。

Answer 3

コメントで@Tポーターで述べたように、あなたのスパンコードが

{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 member={{}} addTrash={true} removeFavorite={this.removeFavorite.bind(null, member.id}