[英]how to get the clicked element when clicked in ReactJS when using map?
I am mapping 'MemeCard.js' elements inside the 'Home.js' using ReactJs 'map' function.我正在使用 ReactJs 'map' function 在 'Home.js' 中映射 'MemeCard.js' 元素。
In Home.js element mapping is done like this在 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>
);
My MemeCard element is我的 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>
);
}
What I want to do is: Change the 'likeImage' from 'whiteHeart' image to 'blueHeart' (both of which I have imported), when clicked on the 'whiteHeart' image using the 'onClick'.我想要做的是:在使用“onClick”单击“whiteHeart”图像时,将“likeImage”从“whiteHeart”图像更改为“blueHeart”(我已导入这两个图像)。 But, no matter which 'MemeCard's 'whiteHeart' image I click, the code is changing only the image of the first item to 'blueHeart'.
但是,无论我单击哪个“MemeCard”的“whiteHeart”图像,代码只会将第一个项目的图像更改为“blueHeart”。 Because it is getting only the "document.getElementById("heartIMG")" of the first item everytime.
因为它每次都只获取第一项的“document.getElementById("heartIMG")"。 But the index is printing the index of the correct item(which is clicked).
但是索引正在打印正确项目的索引(单击)。
Can someone tell me how to solve this problem?有人可以告诉我如何解决这个问题吗?
This will help you... https://upmostly.com/tutorials/react-onclick-event-handling-with-examples这将帮助你...... https://upmostly.com/tutorials/react-onclick-event-handling-with-examples
or you can use React JS onClick event handler或者你可以使用React JS onClick 事件处理程序
Yous should add a dyanmic function which works for each component indvidually.:你应该添加一个 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>
);
Now all components has there own function.现在所有组件都有自己的 function。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.