在 React 中单击时动态更改 SVG 类的颜色？

Question

我有一个 React 组件，其中包括一个颜色选择器和一个具有不同区域的 SVG，这些区域可以彼此独立地填充。我的目标是能够单击颜色选择器中的一种颜色，然后单击 SVG 的一个区域，然后在该区域中填充所选颜色。这是我的组件代码import React, { useState } from "react";import { GithubPicker } from "react-color";//componentsimport "./css/CustomCreation.css";function CustomCreation() {  const [color, setColor] = useState("");  const colorList = ["#000000", "#ffffff", "#ff0000"];  return (    <div>      <div>        <GithubPicker          colors={colorList}          color={color}          onChange={(updatedColor) => setColor(updatedColor.hex)}          width="100px"        />        <div>You selected {color}</div>      </div>      <svg        version="1.0"        xmlns="http://www.w3.org/2000/svg"        width="200"        viewBox="0 0 370.000000 1000.000000"        preserveAspectRatio="xMidYMid meet"      >        <g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)">          <g className="outline">            <path              id="outline"              fill="black"            />          </g>          <g className="headwear">            <path              id="cap"            />            <path              id="brim"            />          </g>          <g className="skin">            <path              id="face"            />            <path              id="wrist"            />          </g>          <g className="top">            <path              id="top"            />          </g>          <g className="pants">            <path              id="pants"            />          </g>          <path            class="gap"            id="gap"            fill="white"          />          <g className="shoes">            <path              id="rightshoe"            />            <path              id="leftshoe"            />          </g>        </g>      </svg>    </div>  );}export default CustomCreation;如果我像这样改变一行<g className="headwear" fill={color}>相应的className将成功填充为选择的颜色。有什么办法可以让标签中的 onClick 发挥作用？

Answer 1

我不知道这是否符合你的需要，但看看我的代码和框

https://codesandbox.io/s/amazing-greider-kdjoc

我所做的是声明一个新colors变量，它将所有类名作为属性保存。

然后在每个 g 标签上我放置如下代码：

      <g

        className="top"

        fill={colors.top ? colors.top : "black"}

        onClick={() => {

          setColors({ ...colors, top: color });

        }}

      >

我的沙箱有这种方法用于top和pantsg 标签。您当然也可以填充所有其他人。我只是想告诉你我是如何让它发挥作用的。

Answer 2

当然。

<g 
    className="headwear"
    fill={color}
    onClick={() => {        setColor("#FF0000");
    }} 
> 
    ... 
</g>

我建议为g标签创建一个功能性的反应组件来管理onClick 颜色状态。