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

我有一个React组件，其中包括一个颜色选择器和一个SVG，它具有可以独立填充的不同区域。我在这里的目标是能够在颜色选择器中单击一种颜色，然后单击SVG的一个区域，然后在该区域中填充选定的颜色

这是我为组件准备的代码

import React, { useState } from "react";
import { GithubPicker } from "react-color";

//components
import "./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"
              d="M1885,9350C1813,9341,1774,9332,1706,9307C1598,9267,1500,9072,1500,8896C1500,8820,1498,8812,1474,8789C1450,8767,1448,8760,1453,8710C1456,8679,1470,8630,1485,8600C1519,8529,1522,8517,1521,8445C1520,8398,1514,8377,1494,8348C1477,8323,1470,8305,1475,8291C1480,8275,1477,8270,1462,8270C1435,8270,1424,8253,1416,8202C1408,8151,1366,8103,1299,8070C1275,8058,1241,8037,1223,8024C1206,8011,1187,8000,1183,8000C1168,8000,1103,7927,1085,7890C1056,7833,1023,7800,901,7704C825,7645,769,7593,740,7552C571,7321,550,7289,550,7262C550,7246,544,7212,536,7186C526,7153,523,7107,527,7022C532,6903,528,6873,491,6768C473,6715,471,6686,472,6429C472,6235,469,6145,461,6137C455,6131,450,6115,450,6102C450,6089,445,6070,440,6060C434,6050,427,5990,424,5928L418,5815L478,5695C537,5579,608,5474,653,5437C665,5428,704,5405,739,5387C793,5360,810,5344,858,5275C888,5231,929,5179,948,5160C967,5141,990,5109,1001,5089C1011,5069,1030,5040,1043,5024C1089,4969,1092,4955,1071,4913C1061,4892,1044,4827,1035,4768C1019,4667,1019,4649,1035,4468C1054,4253,1054,4238,1040,3951C1033,3822,1025,3736,1016,3716C985,3644,971,3591,966,3515C963,3471,958,3403,954,3363C950,3319,952,3280,959,3259C970,3227,959,3159,938,3135C921,3116,930,3059,956,3020C976,2991,980,2977,972,2967C959,2951,934,2877,925,2827C921,2799,923,2781,935,2763C950,2740,950,2737,934,2725C917,2713,917,2706,927,2658C934,2622,935,2573,929,2505C924,2450,922,2387,925,2365C953,2112,964,2055,987,2032C1000,2019,1010,1999,1010,1987C1010,1974,1026,1886,1046,1790C1065,1694,1082,1606,1082,1595C1082,1584,1091,1523,1102,1460C1125,1328,1123,1230,1097,1202C1073,1176,1076,1161,1105,1150C1125,1142,1130,1134,1128,1113C1125,1089,1129,1085,1152,1082C1178,1079,1180,1076,1180,1030C1180,973,1173,950,1155,950C1147,950,1139,933,1135,909C1128,867,1109,809,1066,701C1014,570,1022,475,1088,441C1108,430,1136,411,1150,398C1177,372,1218,347,1270,324C1289,315,1325,296,1350,280C1375,265,1438,237,1490,218L1585,185L1800,185C1990,185,2019,187,2043,203C2065,217,2070,228,2070,260C2070,313,2059,338,2011,390C1989,415,1970,438,1970,442C1970,445,1932,492,1885,546C1838,600,1800,648,1800,652C1800,665,1846,661,1943,639C1993,627,2067,612,2105,605C2174,593,2358,520,2370,500C2383,478,2526,459,2685,457C2868,455,2929,469,2956,521C2983,574,2975,609,2924,657C2898,681,2873,700,2868,700C2863,700,2843,712,2823,728C2803,743,2757,771,2721,791C2669,819,2650,836,2632,871C2599,933,2583,948,2515,982C2447,1015,2400,1056,2400,1081C2400,1103,2335,1160,2311,1160C2274,1160,2267,1185,2274,1278C2287,1427,2289,1438,2303,1467C2319,1500,2334,1566,2356,1705C2364,1760,2380,1845,2390,1894C2401,1943,2417,2035,2426,2099C2435,2162,2446,2223,2451,2232C2456,2242,2465,2328,2471,2422C2477,2525,2487,2611,2496,2634C2507,2662,2508,2676,2500,2685C2492,2695,2493,2701,2502,2709C2567,2761,2600,2796,2605,2819C2608,2835,2622,2862,2635,2880C2648,2898,2656,2918,2652,2924C2642,2940,2649,3046,2665,3120C2673,3156,2691,3248,2706,3325C2721,3402,2746,3506,2762,3555C2806,3693,2812,3739,2799,3878C2790,3971,2790,4022,2799,4093C2806,4143,2815,4300,2820,4440C2831,4728,2834,4750,2862,4750C2873,4750,2895,4764,2912,4781C2942,4810,2943,4813,2937,4880C2934,4917,2926,4966,2919,4988C2908,5026,2909,5031,2945,5088C2985,5153,3009,5212,3010,5247C3010,5260,2995,5287,2977,5307C2954,5333,2938,5365,2928,5410C2907,5494,2893,5530,2880,5530C2875,5530,2870,5534,2870,5539C2870,5544,2865,5561,2859,5577C2834,5636,2799,5735,2799,5745C2799,5751,2802,5794,2807,5841C2812,5888,2812,5942,2807,5961C2803,5980,2797,6085,2793,6195L2788,6395L2823,6427C2872,6471,2876,6503,2845,6585C2831,6622,2820,6667,2820,6685C2820,6723,2788,6801,2764,6821C2750,6832,2749,6847,2755,6913C2759,6960,2758,6996,2752,7003C2746,7010,2737,7051,2730,7094C2724,7138,2715,7183,2710,7194C2706,7206,2697,7235,2690,7260C2665,7350,2610,7491,2590,7517C2579,7531,2570,7548,2570,7555C2570,7573,2543,7593,2460,7636C2357,7689,2357,7689,2391,7728C2407,7746,2420,7769,2420,7780C2420,7812,2401,7850,2383,7857C2348,7869,2330,7903,2330,7958C2330,8017,2310,8073,2285,8087C2270,8096,2276,8111,2338,8221C2377,8290,2421,8381,2435,8425L2462,8504L2442,8521C2422,8536,2422,8543,2430,8633C2435,8686,2437,8736,2434,8743C2431,8752,2443,8764,2467,8775C2506,8794,2602,8871,2652,8925C2719,8998,2667,9075,2520,9120C2495,9127,2471,9137,2466,9142C2460,9146,2451,9150,2444,9150C2438,9150,2413,9169,2389,9193C2326,9253,2283,9289,2247,9310C2189,9343,2007,9363,1885,9350Z"
              fill="black"
            />
          </g>
          <g className="headwear">
            <path
              id="cap"
              d="         M2161,9299C2199,9288,2243,9268,2259,9257C2356,9184,2379,9166,2377,9164C2376,9163,2355,9166,2330,9170C2305,9175,2233,9179,2170,9179C2035,9179,1922,9154,1820,9099C1733,9053,1580,8911,1559,8858C1536,8799,1529,8831,1541,8937C1548,8996,1560,9045,1579,9085C1595,9118,1613,9160,1620,9177C1633,9211,1710,9270,1740,9270C1750,9270,1775,9277,1796,9287C1830,9301,1933,9314,2053,9318C2075,9319,2123,9311,2161,9299Z"
            />
            <path
              id="brim"
              d="         M2375,9119C2413,9108,2475,9089,2512,9078C2586,9056,2649,9015,2650,8989C2650,8964,2547,8866,2468,8815L2431,8792L2425,8832C2416,8886,2359,8993,2323,9024C2269,9073,2224,9082,2083,9077C1965,9073,1948,9070,1870,9038C1823,9019,1760,8991,1730,8976C1661,8941,1681,8961,1786,9032C1852,9077,1883,9091,1956,9108C2077,9137,2081,9137,2200,9139C2280,9140,2321,9135,2375,9119Z"
            />
          </g>
          <g className="skin">
            <path
              id="face"
              d="M2267,9010C2326,8976,2364,8915,2376,8833C2379,8807,2387,8777,2391,8768C2404,8744,2390,8560,2376,8560C2363,8560,2252,8616,2232,8633C2216,8646,1899,8644,1799,8630C1762,8625,1692,8607,1642,8590C1593,8574,1549,8560,1545,8560C1542,8560,1528,8585,1514,8615C1473,8709,1487,8798,1539,8771C1571,8753,1580,8758,1580,8792C1580,8828,1635,8885,1704,8920C1741,8939,1922,9019,1960,9033C1968,9036,2029,9039,2095,9039C2210,9040,2217,9039,2267,9010Z"
            />
            <path
              id="wrist"
              d="M1472,4813C1461,4797,1438,4772,1421,4756C1392,4728,1390,4728,1390,4748C1390,4761,1407,4782,1436,4805C1492,4847,1497,4848,1472,4813Z"
            />
          </g>
          <g className="top">
            <path
              id="top"
              d="M2298,8553C2359,8522,2410,8492,2410,8486C2409,8455,2331,8274,2300,8235C2296,8230,2277,8195,2257,8159L2222,8092L2250,8065C2274,8042,2279,8028,2285,7962C2292,7888,2294,7883,2336,7843C2380,7800,2392,7767,2366,7757C2358,7754,2341,7729,2328,7701L2304,7652L2346,7645C2370,7642,2404,7629,2422,7617C2440,7604,2474,7584,2497,7571C2531,7551,2544,7535,2573,7471C2592,7429,2612,7382,2618,7365C2674,7208,2719,6983,2713,6890C2709,6831,2711,6822,2734,6795C2761,6764,2785,6697,2777,6675C2774,6669,2783,6637,2796,6604C2824,6536,2827,6482,2805,6473C2796,6470,2780,6450,2770,6430C2753,6397,2750,6369,2750,6218C2749,6123,2754,6020,2761,5990C2774,5928,2774,5907,2760,5796C2752,5731,2753,5714,2765,5696C2774,5685,2785,5657,2791,5635C2797,5613,2824,5545,2851,5484C2878,5423,2900,5363,2900,5350C2900,5336,2915,5310,2936,5289C2971,5253,2972,5251,2960,5213C2953,5192,2939,5163,2928,5148C2918,5133,2898,5096,2884,5066C2863,5020,2851,5007,2802,4980C2771,4962,2727,4933,2705,4915C2683,4898,2638,4866,2605,4844C2550,4808,2540,4805,2475,4805C2437,4805,2367,4815,2320,4826C2273,4838,2204,4855,2165,4864C2127,4874,2048,4897,1990,4915C1930,4934,1881,4945,1876,4940C1871,4935,1857,4935,1844,4941C1795,4959,1693,4978,1642,4979C1613,4979,1581,4982,1571,4985C1551,4991,1538,5031,1551,5051C1555,5059,1544,5081,1520,5109C1463,5178,1437,5236,1443,5282C1450,5332,1428,5424,1390,5505C1374,5540,1360,5575,1360,5582C1359,5589,1346,5611,1330,5630C1308,5655,1300,5675,1300,5702C1300,5725,1291,5755,1276,5778C1255,5811,1253,5824,1258,5891C1261,5952,1259,5972,1245,5993C1230,6016,1230,6026,1241,6077C1248,6109,1257,6140,1262,6147C1267,6153,1275,6234,1280,6327C1287,6481,1303,6570,1322,6570C1327,6570,1330,6577,1330,6585C1330,6594,1339,6618,1350,6640C1375,6689,1375,6721,1350,6793C1338,6828,1328,6885,1326,6942C1320,7076,1254,7320,1224,7320C1200,7320,1201,7303,1234,7189C1253,7126,1271,7046,1274,7010C1286,6892,1298,6816,1314,6759L1330,6704L1286,6619L1242,6534L1236,6369C1232,6279,1225,6196,1220,6185C1216,6174,1207,6125,1201,6076C1192,6000,1193,5984,1205,5970C1223,5950,1225,5925,1216,5829C1209,5755,1209,5754,1234,5742C1259,5731,1266,5712,1261,5666C1260,5655,1271,5635,1284,5621C1310,5593,1384,5411,1396,5347C1400,5324,1398,5305,1390,5295C1373,5274,1413,5171,1467,5099C1507,5046,1511,5036,1512,4977C1514,4908,1504,4886,1467,4874C1455,4871,1421,4850,1392,4828C1345,4791,1340,4784,1340,4749C1340,4727,1336,4710,1331,4710C1318,4710,1178,4865,1159,4902C1149,4920,1132,4954,1121,4978C1110,5001,1090,5031,1078,5044C1065,5057,1054,5074,1052,5081C1050,5089,1040,5104,1030,5115C1020,5126,1005,5150,996,5168C987,5185,976,5200,971,5200C967,5200,928,5247,885,5305C815,5400,801,5414,746,5440C671,5475,626,5516,595,5579C581,5606,563,5633,555,5640C547,5647,540,5660,540,5670C540,5680,533,5693,525,5700C517,5706,500,5736,487,5764C465,5811,463,5827,467,5916C470,5972,481,6045,492,6085C510,6147,513,6187,515,6435C517,6666,520,6725,534,6770C568,6880,570,6897,569,7025C567,7186,586,7275,636,7340C654,7365,692,7419,720,7461C778,7550,838,7608,938,7675C978,7701,1016,7732,1021,7742C1026,7752,1036,7760,1043,7760C1057,7760,1074,7784,1106,7851C1130,7900,1201,7967,1260,7997C1300,8018,1348,8051,1407,8098C1441,8126,1449,8139,1454,8180C1460,8221,1465,8229,1491,8240C1517,8251,1521,8257,1516,8280C1513,8299,1517,8314,1530,8327C1544,8342,1550,8370,1555,8438L1562,8528L1599,8538C1619,8543,1671,8558,1715,8570C1772,8586,1836,8594,1940,8599C2199,8611,2173,8614,2298,8553Z"
            />
          </g>
          <g className="pants">
            <path
              id="pants"
              d="M2877,4963C2873,4960,2874,4952,2879,4946C2892,4929,2901,4827,2890,4810C2885,4802,2861,4790,2838,4785C2787,4772,2793,4799,2785,4520C2782,4407,2772,4241,2763,4151C2749,4011,2749,3967,2759,3851L2771,3715L2732,3595C2710,3529,2680,3405,2666,3320C2651,3235,2635,3157,2630,3148C2616,3122,2599,2963,2606,2925C2611,2898,2608,2890,2591,2881C2579,2874,2570,2864,2570,2858C2570,2834,2528,2760,2514,2760C2506,2760,2490,2750,2479,2739C2463,2723,2459,2710,2463,2685C2467,2660,2464,2647,2448,2633C2432,2619,2429,2607,2434,2579C2442,2529,2423,2250,2410,2235C2405,2229,2393,2174,2384,2114C2375,2054,2353,1924,2335,1825C2316,1726,2296,1611,2289,1570C2275,1478,2258,1442,2224,1434C2198,1427,1933,1434,1925,1441C1923,1443,1925,1483,1930,1530C1935,1577,1944,1722,1951,1852C1961,2043,1961,2102,1951,2157C1934,2247,1939,2653,1958,2672C1976,2690,1973,2705,1946,2737C1927,2760,1922,2781,1916,2862C1909,2953,1910,2961,1930,2982C1956,3011,1953,3044,1923,3048C1893,3052,1894,3056,1931,3098C1965,3136,1964,3126,1937,3287C1928,3345,1910,3396,1880,3456L1837,3542L1864,3628C1887,3703,1889,3716,1876,3728C1837,3768,1800,3691,1737,3439C1723,3386,1708,3334,1702,3323C1679,3282,1668,3130,1681,3049C1693,2974,1692,2961,1668,2929C1659,2916,1660,2909,1673,2896C1681,2887,1693,2880,1699,2880C1718,2880,1711,2864,1688,2852C1675,2846,1648,2835,1626,2828C1581,2813,1566,2784,1573,2728C1579,2686,1553,2642,1479,2565L1441,2525L1437,2280C1435,2145,1427,1959,1420,1867C1410,1743,1410,1694,1418,1677C1424,1665,1432,1588,1434,1505C1441,1308,1443,1296,1458,1277C1466,1268,1470,1244,1468,1219C1464,1169,1467,1170,1300,1140C1168,1115,1170,1115,1170,1145C1170,1159,1163,1173,1155,1176C1147,1180,1142,1185,1144,1189C1146,1192,1153,1230,1159,1272C1167,1332,1167,1358,1156,1396C1148,1423,1139,1479,1136,1520C1132,1561,1123,1620,1116,1650C1108,1680,1097,1730,1091,1760C1086,1790,1076,1842,1069,1875C1063,1908,1055,1954,1050,1978C1046,2002,1033,2034,1021,2050C993,2088,980,2200,971,2475C965,2643,966,2687,977,2696C994,2711,994,2761,975,2787C962,2806,962,2812,975,2844C983,2863,990,2890,990,2903C990,2916,997,2935,1005,2946C1028,2976,1024,3015,995,3034C971,3050,959,3100,979,3100C984,3100,993,3129,1000,3164C1009,3214,1009,3237,1000,3265C991,3293,991,3324,999,3395C1005,3446,1010,3511,1010,3538C1010,3591,1022,3638,1048,3685C1059,3705,1067,3755,1072,3835C1076,3901,1084,4020,1090,4100C1098,4214,1097,4273,1085,4375C1054,4660,1055,4693,1099,4858C1113,4908,1123,4911,1140,4871C1146,4854,1192,4799,1241,4748C1290,4697,1330,4652,1330,4648C1330,4643,1338,4640,1348,4640C1368,4640,1483,4747,1484,4766C1485,4772,1500,4791,1519,4809C1545,4833,1551,4845,1546,4864C1543,4878,1544,4892,1550,4895C1555,4898,1560,4912,1560,4926C1560,4939,1563,4950,1566,4950C1569,4950,1616,4941,1670,4930C1724,4919,1795,4906,1827,4901C1859,4896,1928,4880,1980,4866C2032,4851,2100,4835,2130,4829C2160,4823,2194,4814,2205,4809C2216,4804,2263,4789,2310,4774C2422,4739,2523,4743,2587,4783C2611,4798,2632,4810,2634,4810C2637,4810,2670,4833,2707,4861C2744,4889,2791,4920,2810,4929C2829,4938,2849,4951,2853,4958C2857,4964,2866,4970,2872,4970C2878,4970,2880,4967,2877,4963Z"
            />
          </g>
          <path
            class="gap"
            id="gap"
            d="M1821,3473C1858,3412,1870,3381,1895,3280C1908,3228,1921,3178,1925,3168C1929,3157,1919,3138,1896,3112C1856,3068,1853,3055,1877,3028C1891,3013,1891,3006,1881,2986C1872,2971,1870,2945,1874,2914C1877,2887,1880,2835,1879,2798C1879,2733,1880,2730,1905,2720C1929,2711,1930,2708,1919,2693C1900,2670,1892,2138,1911,2104C1920,2087,1921,2041,1915,1923C1911,1836,1908,1753,1909,1737C1910,1722,1906,1681,1900,1647C1894,1613,1885,1522,1880,1445C1868,1281,1844,1171,1811,1137C1796,1120,1782,1083,1770,1025C1759,978,1739,917,1724,890L1698,842L1625,918C1556,990,1552,996,1547,1050C1543,1081,1534,1120,1525,1136C1517,1152,1510,1186,1510,1212C1510,1238,1503,1285,1494,1317C1485,1352,1477,1434,1474,1525C1472,1608,1465,1692,1458,1713C1449,1741,1450,1772,1459,1843C1466,1893,1474,2057,1476,2205C1479,2354,1483,2484,1485,2496C1488,2508,1519,2550,1556,2591C1620,2663,1621,2665,1615,2707C1606,2772,1614,2786,1673,2806C1702,2815,1731,2827,1738,2833C1756,2847,1753,2884,1731,2904C1715,2918,1714,2926,1723,2950C1731,2972,1731,2995,1722,3038C1715,3070,1713,3119,1716,3146C1723,3209,1760,3380,1770,3401C1775,3410,1781,3438,1785,3464C1789,3489,1794,3510,1795,3510C1797,3510,1808,3493,1821,3473Z"
            fill="white"
          />
          <g className="shoes">
            <path
              id="rightshoe"
              d="M2232,1291C2229,1171,2238,1144,2287,1124C2335,1104,2360,1082,2360,1059C2360,1039,2438,971,2496,942C2519,930,2549,907,2561,890C2620,813,2652,782,2697,760C2723,747,2768,719,2797,698C2826,677,2852,660,2857,660C2861,660,2879,646,2897,628C2963,564,2934,517,2818,499C2741,486,2761,486,2600,499C2455,510,2430,518,2230,607C2200,621,2153,635,2125,640C2098,645,2055,654,2030,660C2005,667,1938,679,1881,687C1784,701,1775,705,1741,739L1704,776L1732,820C1766,873,1797,954,1811,1024C1825,1095,1840,1130,1856,1130C1872,1130,1873,1136,1901,1281L1923,1397L2079,1393L2235,1389L2232,1291Z"
            />
            <path
              id="leftshoe"
              d="M1499,1086C1505,1061,1510,1027,1510,1010C1510,983,1523,966,1585,906C1648,846,1660,829,1660,802C1660,776,1671,758,1715,715C1745,684,1770,655,1770,650C1770,633,1837,536,1870,505C1888,489,1927,443,1956,403C1986,364,2014,328,2020,325C2032,318,2033,270,2022,253C2006,227,1953,220,1788,220C1619,220,1617,220,1511,256C1453,275,1389,301,1370,314C1351,326,1319,342,1300,350C1258,366,1160,429,1160,439C1160,443,1148,453,1133,461C1091,482,1084,492,1077,537C1069,586,1102,706,1151,802C1156,811,1163,838,1166,860C1170,883,1183,917,1196,936C1214,962,1220,985,1220,1023L1220,1076L1308,1093C1356,1103,1402,1115,1410,1120C1418,1126,1439,1130,1456,1130C1485,1130,1489,1126,1499,1086Z"
            />
          </g>
        </g>
      </svg>
    </div>
  );
}

export default CustomCreation;

import React，{useState}来自“React”；
从“反应颜色”导入{GithubPicker}；
//组成部分
导入“/css/CustomCreation.css”；
函数CustomCreation（）{
const[color，setColor]=useState（“”）；
const colorList=[“#000000”、“#ffffff”、“#ff0000”]；
返回(
setColor（updatedColor.hex）}
宽度=“100px”
/>
您选择了{color}
);
}
导出默认自定义创建；

如果我改变一条像这样的线

<g className="headwear" fill={color}>

相应的类名将成功填充到所选颜色

---

有什么方法可以让它在标签上点击一次就可以正常工作吗？

我不知道这是否适合你的需要，但是看看我的代码沙盒

我所做的是声明一个新的

colors

变量，它将保存所有类名作为属性

然后在每个g标记处，我放置如下代码：

      <g
        className="top"
        fill={colors.top ? colors.top : "black"}
        onClick={() => {
          setColors({ ...colors, top: color });
        }}
      >

{
setColors（{…colors，top:color}）；
}}
>

我的沙盒有这种方法用于

top

和

pants

g标签。当然，您也可以填充所有其他内容。我只是想让你看看我是怎么做到的。

当然

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

{
setColor（“FF0000”）；
}} 
> 
... 

我建议为

g

标记创建一个功能性的react组件，以管理

onClick

和颜色状态