如何在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>
        ))}

让我知道这在您的情况下还是行不通的，或者我是否在此引起误导。