使用地图时在ReactJS中单击时如何获取单击的元素？

Question

我正在使用 ReactJs 'map' 函数在 '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's 'whiteHeart' 图像，代码只会将第一个项目的图像更改为 'blueHeart'。因为它每次都只获得第一项的“document.getElementById(“heartIMG”)”。但是索引正在打印正确项目的索引（被点击）。

谁能告诉我如何解决这个问题？

Answer 1

这将帮助您... https://upmostly.com/tutorials/react-onclick-event-handling-with-examples

或者你可以使用 React JS onClick event handler

Answer 2

您应该添加一个动态函数，它分别适用于每个组件。:

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

现在所有组件都有自己的功能。

使用地图时在ReactJS中单击时如何获取单击的元素？

how to get the clicked element when clicked in ReactJS when using map?

html

javascript

css

onclick

reactjs