使用map時如何在ReactJS中點擊時獲取被點擊的元素？

Question

我正在使用 ReactJs 'map' function 在 'Home.js' 中映射 'MemeCard.js' 元素。

在 Home.js 中，元素映射是這樣完成的

memes = ["url1","url2","url3","url4"];

return (
    <div className="container my-3">
      <div className="row">
        {memes.map((meme, index) => {
          return (
            <div className="col-xl-4 my-5">
              <MemeCard imgurl={meme} index={index}  />
            </div>
          );
        })}
      </div>
   </div>
   );

我的 MemeCard 元素是

import React from 'react';
import MemeCSS from './MemeCard.module.css';
import whiteHeart from '../images/bordered_heart.png';
import blueHeart from '../images/blue_heart.png';
import Share from '../images/share.png';

export default function MemeCard(props) {

function likeBtnClicked(index){
    document.getElementById("heartIMG").setAttribute("src",blueHeart);
    console.log(index);
}

  return (
    <div className={MemeCSS.box}>
      <img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" />
      <div className={MemeCSS.divbutton}>
        <img className={MemeCSS.shareImg} src={Share} alt="share" />
        <img
          id="heartIMG"
          className={MemeCSS.likeImg}
          onClick={()=>{likeBtnClicked(props.index);}}
          src={whiteHeart}
          alt="like"
        />
      </div>
    </div>
  );
}

我想要做的是：在使用“onClick”單擊“whiteHeart”圖像時，將“likeImage”從“whiteHeart”圖像更改為“blueHeart”（我已導入這兩個圖像）。 但是，無論我單擊哪個“MemeCard”的“whiteHeart”圖像，代碼只會將第一個項目的圖像更改為“blueHeart”。 因為它每次都只獲取第一項的“document.getElementById("heartIMG")"。 但是索引正在打印正確項目的索引（單擊）。

有人可以告訴我如何解決這個問題嗎？

Answer 1

這將幫助你...... https://upmostly.com/tutorials/react-onclick-event-handling-with-examples

或者你可以使用React JS onClick 事件處理程序

Answer 2

你應該添加一個 dyanmic function 它適用於每個組件 indvidually。：

// MemeCard.js
import React from 'react';
    import MemeCSS from './MemeCard.module.css'; 
    import whiteHeart from '../images/bordered_heart.png';
    import blueHeart from '../images/blue_heart.png';
    import Share from '../images/share.png';

 export default function MemeCard(props) {

  function likeBtnClicked(event){
   const element = event.currentTarget;
   element.setAttribute("src",blueHeart);
  }

  return (
    <div className={MemeCSS.box}>
     <img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" />
      <div className={MemeCSS.divbutton}>
      <img className={MemeCSS.shareImg} src={Share} alt="share" />
    <img
      id="heartIMG"
      className={MemeCSS.likeImg}
      onClick={likeBtnClicked}
      src={whiteHeart}
      alt="like"
    />
  </div>
</div>
 );

現在所有組件都有自己的 function。