如何解决如何在React中使用useState仅更改循环中的当前this元素?
我正在努力实现这一目标。 当onMouSEOver时,所有图像都在更改类并显示内容。我只希望更改鼠标悬停的当前元素。任何想法如何实现这一目标?我已经尝试了很多东西。
如果我可以使用类似: onMouSEOver = {()=> THIS.setShowContent(“ showContent”)} 但是我不能!
非常感谢! 代码:
import classes from "./style.module.scss";
export default function ProjectsComponent() {
const [images,setimages] = useState([]);
const [showContent,setShowContent] = useState("dontShowContent");
useEffect(() => {
let arrayAux = [];
for (let i = 1; i < 9; i++) {
arrayAux.push(
<div className={[classes.images,classes[`image${i}`]].join(" ")}>
<div className={classes.showBackground}></div>
</div>
);
}
setimages(arrayAux);
},[]);
return (
<div className={classes.containerProjects}>
<div className={classes.grid}>
{images.map((imageDiv,index) => (
<div
key={index}
onMouSEOver={() => setShowContent("showContent")}
onMouseLeave={() => setShowContent("dontShowContent")}
className={classes.imgBox}
>
<div className={classes[showContent]}>IMAGE {index} CONTENT</div>
<div className={classes.onHover}>{imageDiv}</div>
</div>
))}
</div>
</div>
);
}
解决方法
我建议您在images map
内部的每个元素之间添加一些唯一的内容。
因此,一种方法是利用另一个状态变量来跟踪当前活动图像以显示内容on hover
。
因此,您可以使用index
来设置activeImage
。然后比较index
和activeImage
状态变量,以使用其索引检查当前图像和活动图像(悬停的图像),然后仅应用show content
类。
const [activeImage,setActiveImage] = useState(-1);
{images.map((imageDiv,index) => (
<div
key={index}
onMouseOver={() =>{
setShowContent("showContent");
setActiveImage(index);
}}
onMouseLeave={() => {
setShowContent("dontShowContent");
setActiveImage(-1);
}}
className={classes.imgBox}
>
<div className={index === activeImage && classes[showContent]}>IMAGE {index} CONTENT</div>
<div className={classes.onHover}>{imageDiv}</div>
</div>
))}
让我知道这在您的情况下还是行不通的,或者我是否在此引起误导。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。