Tengo una situación en la que una vez que hago clic en una imagen, me gustaría que tuviera un borde. Y si vuelvo a hacer clic, me gustaría que se elimine ese borde. PERO, ¡también quiero que se elimine ese borde (o "se mueva") si se hace clic en otra imagen en su lugar!
Supongo que hay un par de formas de hacerlo, de las cuales no estoy seguro de cómo implementarlas:
Estoy usando estados que se transmiten de mis bisabuelos, así que no estoy seguro de poder publicar todos los guiones; intentaré mantenerlos en fragmentos.
mis imágenes: usando 'siguiente/imagen'
return( <div key={attr} id={attrprops.attrChoice+':'+attr}> <Image src={imgSourceUrl} alt={attrprops.alt} width={attrprops.w} height={attrprops.h} onClick={()=>{ attrprops.setButtonClick(!attrprops.buttonClick); attrprops.setBorder(attrprops.selectedAttr==attr ? false : true); attrprops.setSelectedAttr(attr); }} /> <br></br> <div className='flex justify-center align-center'>{attr}</div> </div> );mi cambio de estado:
useEffect(()=>{ if (border&&buttonClick){ document.getElementById(`body_type:${selectedAttr}`).className = 'border-2 border-blue-500'; publishprops.setAttrNumber(4); } else if (!border&&buttonClick){ document.getElementById(`body_type:${selectedAttr}`).className = 'border:none'; publishprops.setAttrNumber(2); } },[border])tal como está actualmente, solo agrega los bordes a las imágenes seleccionadas. Realmente no estoy seguro de qué ruta tomar en este...
Para usar React de manera efectiva, debe cambiar un poco su forma de pensar sobre el estado. Su plantilla debe leerse fácilmente, debe quedar claro cuál es la intención.
Parece que tu ejemplo es bastante simple. Es alguna imagen resaltada, o ninguna.
Considere este ejemplo simplificado:
import React, { useState } from 'react'; const images = [ '1.png', '2.png', '3.png', '4.png', '5.png', ]; const MyComponent = () => { const [selectedImage, setSelectedImage] = useState(null); return ( <ul> {images.map(src => ( <img key={src} className={` my-image ${selectedImage === src ? 'active' : ''} `} onClick={() => setSelectedImage( selectedImage => ( selectedImage !== src ? src : null ) )} /> ))} </ul> ); }; Cuando selectedImage es null , significa que no se ha hecho clic en ninguna imagen. Y al hacer clic, lo configuramos en la imagen en la que se hizo clic o lo volvemos a establecer en null si se ha hecho clic en la misma imagen. Y luego aplicaría el borde a las imágenes con clase active . CSS simplificado:
.my-image { border: 5px solid transparent; } .my-image.active { border-color: red; }