Tengo problemas para obtener la identificación del elemento actual.
Aquí está mi código:
<path onClick={(e) => setSelected(e.target.id)} fill={this.element.id == selected ? "#f00000" : "#bfbfbf"} fill-rule="nonzero" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dashoffset="0" id="path4636"/>ACTUALIZACIÓN: se trata de 96 elementos, no uno solo
Puede usar React Ref para obtener su ID de elemento DOM.
Aquí tienes un fragmento de código:
... constructor() { super(); this.ref= React.createRef(); } render() { return ( <div> <h1 onClick={() => { console.log(this.textInput.current.id); }} > click me </h1> <path id="id1" ref={this.textInput} /> </div> ); } ...Utilice el elemento ref:
import React, { useRef, useState } from "react"; const PathExample = () => { const [selected, setSelected] = useState(); const pathRef = useRef(); return ( <svg width="100%" height="auto" viewBox="0 0 71 49" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M10.4113 0.541169L7.7192 3.23717C7.47085 3.48588 7.47085 3.88912 7.7192 4.13783L12.631 9.05681C12.8793 9.30552 13.282 9.30551 13.5303 9.05681L16.2224 6.3608C16.4707 6.11209 16.4707 5.70886 16.2224 5.46015L11.3106 0.541169C11.0623 0.292461 10.6596 0.292461 10.4113 0.541169Z" onClick={(e) => setSelected(e.target.id)} fill={selected === pathRef?.current?.id ? "#f00000" : "#bfbfbf"} fillRule="nonzero" stroke="#808080" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="4" strokeDashoffset="0" id="path4636" ref={pathRef} /> </svg> ); }; export default PathExample;Para un número ilimitado de rutas:
import React, { useEffect, useRef, useState } from "react"; const PathExample = () => { const [selectedItems, setSelectedItems] = useState([]); const svgRef = useRef(); const toggleSelected = (id) => { let newSelectedItems = [...selectedItems]; if (newSelectedItems.includes(id)) { newSelectedItems.splice(newSelectedItems.indexOf(id), 1); } else { newSelectedItems.push(id); } setSelectedItems(newSelectedItems); }; useEffect(() => { const paths = svgRef.current.querySelectorAll("path"); paths.forEach((path) => { if (selectedItems.includes(path.id)) { path.setAttribute("fill", "#f00000"); } else { path.setAttribute("fill", "#bfbfbf"); } }); }, [selectedItems]); return ( <svg width="100%" height="100%" viewBox="0 0 71 49" fill="none" xmlns="http://www.w3.org/2000/svg" ref={svgRef} > <path d="M10.4113 0.541169L7.7192 3.23717C7.47085 3.48588 7.47085 3.88912 7.7192 4.13783L12.631 9.05681C12.8793 9.30552 13.282 9.30551 13.5303 9.05681L16.2224 6.3608C16.4707 6.11209 16.4707 5.70886 16.2224 5.46015L11.3106 0.541169C11.0623 0.292461 10.6596 0.292461 10.4113 0.541169Z" onClick={(e) => toggleSelected(e.target.id)} fill="#bfbfbf" id="path1" /> <path d="M10.4113 0.541169L7.7192 3.23717C7.47085 3.48588 7.47085 3.88912 7.7192 4.13783L12.631 9.05681C12.8793 9.30552 13.282 9.30551 13.5303 9.05681L16.2224 6.3608C16.4707 6.11209 16.4707 5.70886 16.2224 5.46015L11.3106 0.541169C11.0623 0.292461 10.6596 0.292461 10.4113 0.541169Z" onClick={(e) => toggleSelected(e.target.id)} transform="translate(-7,-7)" fill="#bfbfbf" id="path2" /> <path d="M10.4113 0.541169L7.7192 3.23717C7.47085 3.48588 7.47085 3.88912 7.7192 4.13783L12.631 9.05681C12.8793 9.30552 13.282 9.30551 13.5303 9.05681L16.2224 6.3608C16.4707 6.11209 16.4707 5.70886 16.2224 5.46015L11.3106 0.541169C11.0623 0.292461 10.6596 0.292461 10.4113 0.541169Z" onClick={(e) => toggleSelected(e.target.id)} transform="translate(7,7)" fill="#bfbfbf" id="path3" /> </svg> ); }; export default PathExample;Compruebe CodePen: https://codepen.io/marcinbzone/pen/WNdmPaj