单击图像并向其添加类，但在选择其他图像时删除类答案

【问题标题】：click an image and add class to it but when selectin other one remove the class单击图像并向其添加类，但在选择其他图像时删除类
【发布时间】：2022-01-05 16:21:26
【问题描述】：

我有多个可以从轮播中选择的图片。这些图像是从这样的地图函数渲染的：

 {imagenesProductos.map((img) => {
                  if (img) {
                    console.log(img);
                    return (
                      <SwiperSlide className="">
                        <Image onClick={e => clickedImage(e)} className="product" src={img} width={100} height={100} alt='productImage' />
                      </SwiperSlide>
                    )
                  }
  })}

当我单击图像时，我有一个方法可以通过控制台记录图像的 src。

  const clickedImage = (e) => {
    console.log(e.target.src)
  }

我想要做的是为所选图像添加一个类，并在我选择另一个图像时将其删除。我正在使用样式化组件。

我希望你能帮助我！提前致谢。

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

您可以使用状态来跟踪点击的图像。如果地图中的当前图像是选定的图像，那么您可以添加一个类active 或任何您喜欢的东西。我使用索引作为键，因为我想图像列表不会经常改变。以下是它的示例代码。

const [curImageIndex, setCurImageIndex] = useState(null);
  const clickedImage = (index) => {
    setCurImageIndex(index);
  };

  return (
    <>
      {magenesProductos.map((img, index) => {
        if (img) {
          console.log(img);
          return (
            <SwiperSlide
              className={`product ${curImageIndex === index? 'active' : ''}`}
              key={index}
            >
              <Image
                onClick={() => clickedImage(index)}
                className="product"
                src={img}
                width={100}
                height={100}
                alt="productImage"
              />
            </SwiperSlide>
          );
        }
      })}
    </>
  );

【讨论】：

【解决方案2】：

您应该有一个状态，该状态持有此特定选定图像的标识符。例如：

const [selectedPath,setSelectedPath]=useState('');

然后，在map 中，您可以添加具有此状态的条件，并在需要的地方使用className。

 {imagenesProductos.map((img) => {
                  if (img) {
                    console.log(img);
                    return (
                      <SwiperSlide className="">
                        <Image onClick={clickedImage} className=`product ${img===selectedPath?"selected":""}` src={img} width={100} height={100} alt='productImage' />
                      </SwiperSlide>
                    )
                  }
  })}

而clickImage函数应该是：

 const clickedImage = (e) => {
    console.log(e.target.src);
    setSelectedPath(e.target.src);
  }

【讨论】：

【解决方案3】：

使用单个状态来保存当前选定的图像。在映射之前过滤imagenesProductos。将当前映射的img 与存储的selectedImage 状态进行比较，以有条件地将其他类添加到图像中。

const [selectedImage, setSelectedImage] = React.useState(null);

...

const clickedImage = (e) => {
  const { src } = e.target;
  console.log(src);
  setSelectedImage(src);
}

...

{imagenesProductos
  .filter(img => img)
  .map((img) => {
    console.log(img);
    return (
      <SwiperSlide className="">
        <Image
          onClick={clickedImage}
          className={["product", selectedImage === img ? "newClass" : ""].join(" ")}
          src={img}
          width={100}
          height={100}
          alt='productImage'
        />
      </SwiperSlide>
    );
  }
})}

【讨论】：