Tengo varias imágenes que puedo seleccionar de un carrusel. Estas imágenes se representan a partir de una función de mapa como esta:
{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> ) } })}Cuando hago clic en la imagen, tengo un método que solo la consola registra el src de la imagen.
const clickedImage = (e) => { console.log(e.target.src) }Lo que quiero hacer es agregar una clase a la imagen seleccionada y eliminarla cuando seleccione otra. Estoy usando componentes con estilo.
¡Espero que puedas ayudarme! Gracias por adelantado.
Puede utilizar un estado para realizar un seguimiento de las imágenes en las que se ha hecho clic. si la imagen actual en el mapa es una imagen seleccionada, puede agregar una clase active o cualquier cosa que desee. Estoy usando el índice como clave, ya que la lista de imágenes no cambiaría a menudo, supongo. A continuación se muestra el código de ejemplo para ello.
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> ); } })} </> );Use un solo estado para mantener la imagen seleccionada actualmente. Filtrar imagenesProductos antes de mapear. Compare la imagen asignada img con el estado de imagen selectedImage almacenado para agregar condicionalmente la otra clase a la imagen.
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> ); } })}Debe tener un estado que posea un identificador de esta imagen seleccionada específica. Por ejemplo:
const [selectedPath,setSelectedPath]=useState(''); Entonces, en el map puede agregar una condición con este estado y usar el nombre de className donde lo necesite.
{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> ) } })}Y la función clickImage debería ser:
const clickedImage = (e) => { console.log(e.target.src); setSelectedPath(e.target.src); }