Intento crear una aplicación qrcode con react. Después de que el usuario envíe el formulario con valor para crear un svg, también puede descargarlo. Pero no puedo hacer que funcione, cada vez que descarga el mismo svg.
mi función de descarga
const downloadQRCode = (e) => { e.preventDefault(); let svg = qrRef.current.querySelector("svg"); let svgXML = new XMLSerializer().serializeToString(svg); let dataUrl = "data:image/svg," + encodeURIComponent(svgXML); let anchor = document.createElement("a"); anchor.href = dataUrl; anchor.download = `qr-code.svg`; document.body.appendChild(anchor); anchor.click(); document.body.removeChild(anchor); };Aquí uso el mapa para renderizar el componente qrcode y un botón para descargar el svg
qrcode.map((item) => { return ( <li ref={qrRef}> <QRCode className="qrcode" size={item.size} value={item.value} bgColor={item.bgcolor} fgColor={item.fgcolor} level="L" renderAs="svg"> </QRCode> <form onSubmit={downloadQRCode}> <button type="submit">Download</button> </form> </li> ) }Parece que está utilizando una sola referencia de React para todo el qrcode que está mapeando. Sugiero usar una matriz de referencias React y pasar esto al controlador onClick del botón.
const qrcodeRefs = React.useRef([]); qrcodeRefs.current = qrcode.map((_, i) => qrcodeRefs.current[i] ?? createRef());...
const downloadQRCode = (qrRef) => e => { const svg = qrRef.current.querySelector("svg"); const svgXML = new XMLSerializer().serializeToString(svg); const dataUrl = "data:image/svg," + encodeURIComponent(svgXML); const anchor = document.createElement("a"); anchor.href = dataUrl; anchor.download = `qr-code.svg`; document.body.appendChild(anchor); anchor.click(); document.body.removeChild(anchor); };...
qrcode.map((item, index) => { return ( <li ref={qrcodeRefs.current[i]}> <QRCode className="qrcode" size={item.size} value={item.value} bgColor={item.bgcolor} fgColor={item.fgcolor} level="L" renderAs="svg" /> <button type="button" onClick={downloadQRCode(qrcodeRefs.current[i])}> Download </button> </li> ) }si usa ref en un bucle, mantendrá el último valor. no necesita una ref , reemplace
let svg = qrRef.current.querySelector("svg");con
// e.target.parentNode is the li dom let svg = e.target.parentNode.querySelector("svg");