es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Haz clic en una imagen y añádele una clase, pero cuando selecciones otra, elimina la clase.

Haz clic en una imagen y añádele una clase, pero cuando selecciones otra, elimina la clase.

02 Aug, 2023 Programación

Tengo varias imágenes de las cuales puedo seleccionar a través de un carrusel. Estas imágenes se generan desde una función de mapa de la siguiente manera:

{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' />
                      </image></swiperslide>
                    )
                  }
  })}

Cuando hago clic en la imagen, tengo un método que simplemente muestra en la consola la ruta 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 utilizando styled components.

¡Espero que puedas ayudarme! ¡Gracias de antemano!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    ¡Claro, puedo ayudarte con eso!

    Para agregar una clase a la imagen seleccionada y eliminarla de las demás, necesitas llevar un registro de la imagen seleccionada. Aquí hay una forma de hacerlo:

    1. Agrega una variable de estado para llevar un registro de la imagen seleccionada.
    const [selectedImage, setSelectedImage] = useState(null);
    1. Cambia la función clickedImage para actualizar el estado cuando se hace clic en una imagen.
    const clickedImage = (e) => {
  setSelectedImage(e.target.src);
};
    1. Crea un componente con estilo separado para la imagen seleccionada.
    const SelectedImage = styled(Image)`
  border: 2px solid blue;
`;
    1. Actualiza la función map para renderizar condicionalmente la imagen seleccionada con el componente SelectedImage.
    {imagenesProductos.map((img) => {
  if (img) {
    console.log(img);
    return (
      <swiperslide classname="">
        {img === selectedImage ? (
          <selectedimage onclick="{(e)" ==""> clickedImage(e)}
            className="product"
            src={img}
            width={100}
            height={100}
            alt="productImage"
          />
        ) : (
          <image onclick="{(e)" ==""> clickedImage(e)}
            className="product"
            src={img}
            width={100}
            height={100}
            alt="productImage"
          />
        )}
      </image></selectedimage></swiperslide>
    );
  }
})}

    Esto verifica si la img actual es la imagen seleccionada y la renderiza con el componente SelectedImage con un borde azul. De lo contrario, la renderiza con el componente Image regular.

    ¡Espero que esto te ayude! Hazme saber si tienes alguna pregunta.

Comments are closed.