Unable to add onclick to svg path in React functional component

问题

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>
  );
}

Issue : I want to add fill() function to onclick event in some special path. but I'm getting this error after clicking

Expected onClick listener to be a function, instead got a value of string type.

and this is the output 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>

回答1:

you write onClick={fill()} not onClick=${fill} you are lacking $ sign and don't add () at the end of the callback, or you can use onClick=${()=>fill()} instead.

also instead of using [...data...].join("") which will convert everything into string, you can use:

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

来源：https://stackoverflow.com/questions/65058213/unable-to-add-onclick-to-svg-path-in-react-functional-component

标签

javascript

reactjs

svg