प्रतिक्रियाशील कार्यात्मक घटक में svg पथ पर onclick जोड़ने में असमर्थ

Question

import React, { useEffect, useState } from "react";
import SVG from "react-inlinesvg";
import axios from "axios";

export default function App() {
  const [color, setColor] = useState("red");
  const [image, setimage] = useState(null);

  const fill = () => {
    setColor("green");
  };
  useEffect(() => {
    axios
      .get("https://file.qwertygo.com/media/image/cyan_qWYARBm.svg")
      .then(({ data }) => {
        setimage(
          [
            data.substring(0, data.search("currentcolor") + 13),
            ` onClick={fill()} `,
            data.substring(data.search("currentcolor") + 13)
          ].join("")
        );
      });
  }, []);
  return (
    <div className="App">
      {image && (
        <SVG
          src={image}
          onClick={() => alert("green")}
          style={{
            bottom: 0,
            right: 0,
            position: "absolute",
            color: color,
            background: "#000"
          }}
        />
      )}
    </div>
  );
}

समस्या: मैं कुछ विशेष पथ में ऑनक्लिक ईवेंट में फिल () फंक्शन जोड़ना चाहता हूं। लेकिन मुझे यह त्रुटि क्लिक करने के बाद मिल रही है

onClickएक समारोह के लिए अपेक्षित श्रोता, इसके बदले एक stringप्रकार का मान मिला ।

और यह उत्पादन svg है:

<svg xmlns="http://www.w3.org/2000/svg" width="212" height="244" viewBox="0 0 212 244">
    <defs>
        <clipPath id="quebmie6fa">
            <path fill="none" stroke="#707070" d="M0 0H212V244H0z" transform="translate(235 143)"/>
        </clipPath>
    </defs>
    <g clip-path="url(#quebmie6fa)" transform="translate(-235 -143)">
        <path fill="currentcolor" onClick={fill()}  d="M424.413 141.66A183.073 183.073 0 0 0 241.34 324.733h139.35a43.723 43.723 0 0 1 87.445 0h139.35A183.073 183.073 0 0 0 424.413 141.66z" transform="rotate(-14 452.52 288.497)"/>
        <path d="M-419.71-981.787a184.43 184.43 0 0 1-5.317-36.7 182.149 182.149 0 0 1 2.037-35.924 183.1 183.1 0 0 1 8.855-34.257 184.4 184.4 0 0 1 15.136-31.7 184.393 184.393 0 0 1 20.881-28.245 183.1 183.1 0 0 1 26.09-23.9 182.158 182.158 0 0 1 30.763-18.664 184.426 184.426 0 0 1 34.9-12.535 183.84 183.84 0 0 1 44.431-5.482 182.2 182.2 0 0 1 36.685 3.741 183.411 183.411 0 0 1 34.685 10.834 184.485 184.485 0 0 1 31.712 17.342 184.062 184.062 0 0 1 27.767 23.265 182.161 182.161 0 0 0-127.848-52.183 183.849 183.849 0 0 0-44.432 5.482c-96.058 23.95-156.256 121.918-134.191 218.387l-2.153.537zm220.059-54.867a43.8 43.8 0 0 0-10-18.771 43.609 43.609 0 0 1 7.076 8.251 43.559 43.559 0 0 1 4.9 10.028l-1.974.492z" transform="translate(676.09 1356.532)" style="mix-blend-mode:multiply;isolation:isolate" fill="#bfbfbf"/>
    </g>
</svg>

Answer 1

आप लिखते हैं onClick={fill()}कि onClick=${fill}आपको $साइन की कमी नहीं ()है और कॉलबैक के अंत में न जोड़ें , या आप onClick=${()=>fill()}इसके बजाय उपयोग कर सकते हैं ।

उपयोग करने के बजाय [...data...].join("")जो सब कुछ स्ट्रिंग में बदल देगा, आप उपयोग कर सकते हैं:

setimage(
data.substring(0, data.search("currentcolor") + 13)+` onClick=${fill}`+data.substring(data.search("currentcolor") + 13)
)