无法在 React 功能组件中将 onclick 添加到 svg 路径 [英] Unable to add onclick to svg path in React functional component

问题描述

import React, { useEffect, useState } from "react";从react-inlinesvg"导入SVG；从axios"导入 axios；导出默认函数 App() {const [color, setColor] = useState("red");const [image, setimage] = useState(null);常量填充 = () =>{setColor(绿色");};useEffect(() => {公理.get(https://file.qwertygo.com/media/image/cyan_qWYARBm.svg").then(({数据}) => {设置图像([data.substring(0, data.search(currentcolor") + 13),` onClick={fill()} `,data.substring(data.search(currentcolor") + 13)].join(""));});}, []);返回 (
{图像&&(<SVG源代码={图像}onClick={() =>警报(绿色")}风格={{底部:0，右:0，位置:绝对"，颜色:颜色，背景:#000"}}/>)}
);}

问题:我想在某些特殊路径中向 onclick 事件添加 fill() 函数.但是点击后我收到这个错误

<块引用>

期望 onClick 侦听器是一个函数，而不是获得 string 类型的值.

这是输出svg:

解决方案

你写的是 onClick={fill()} 而不是 onClick=${fill} 你所缺少的$ 标志并且不要在回调的末尾添加 () ，或者你可以使用 onClick=${()=>fill()} 代替.

也不是使用 [...data...].join("") 将所有内容转换为字符串，您可以使用:

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

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>

解决方案

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

这篇关于无法在 React 功能组件中将 onclick 添加到 svg 路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！