0
148
VistasCambie el estilo del elemento individual en el componente React que devuelve múltiples elementos repetidos
Estoy renderizando un componente Canvas en reaccionar, que devuelve una lista de elementos <rect> , lo que estoy tratando de lograr es cambiar el color del <rect> en el que se hizo clic solamente, sin embargo, en mi código cada vez que hago clic en uno de los elementos , la lista completa de elementos se actualiza, ¿cómo puedo actualizar solo el elemento <rect> en el que se hizo clic?
a continuación está mi código:
import { useState } from "react"; import styles from "./Canvas.module.css"; let data = [ { id: "1", x: "50", y: "20", }, { id: "2", x: "90", y: "20", }, { id: "3", x: "130", y: "20", }, ]; const Canvas = () => { const [redRectangle, setRedRectangle] = useState(); const setColorHandler = () => { setRedRectangle(styles.rect); }; let arr = data.map((element) => { return ( <rect className={redRectangle} key={element.id} width="30" height="4" x={element.x} y={element.y} onClick={setColorHandler} /> ); }); return ( <svg width="800" height="600" id="svg"> {arr} </svg> ); }; export default Canvas;antes de ejecutar el código
después de hacer clic en uno <rect>
2 Respuestas
Responde la pregunta0
En primer lugar, cree un componente separado para rect. Después de crearlo, agregue un estado de nivel de componente al componente rect, especificando el color. Luego asigne el componente rect en la función de lienzo.
Después del mapeo, cree una función para cambiar la clase de un solo componente rect usando el id. Siempre que llame a la función, pase la identificación del elemento como parámetro a la función. Después de hacer eso, use un bucle forEach para verificar si el ID de elemento recibido del parámetro es igual al ID de elemento actual. Y si es igual, cambie el estado de ese componente específico.
Gracias😊
0
Está sucediendo porque U está asignando un nombre de clase a todos los elementos. Al hacer clic en uno de ellos, ese nombre de clase se cambia y todos se actualizan. Lo que debes hacer es esto: 1- No necesitas que el estado lo elimine. 2-Define otro nombre de clase en tu archivo CSS llamado cambiado a rojo y dale el estilo que quieras. 3-En su función de controlador de clic, cambie el nombre de clase como se muestra a continuación:
const setColorHandler = (e)=> { e.currentTarget.classList.toggle("changed-to-red") }