单击时更改区域颜色（react-simple-maps）答案

【问题标题】：Change region color on click (react-simple-maps)单击时更改区域颜色（react-simple-maps）
【发布时间】：2021-02-09 22:14:06
【问题描述】：

我正在使用反应简单的地图。我创建了一张美国地图，我需要在点击时更改州的颜色。我可以通过向 Geography 组件添加新闻样式道具来更改它，但是当点击事件结束时颜色会恢复为默认颜色。有没有办法让点击的颜色保持不变？

【问题讨论】：

标签： reactjs geomap react-simple-maps

【解决方案1】：

您必须存储 clickedCity 并经过这样的检查

  const [clickedCity, setClickedCity] = useState("");
  const handleClick = (geo) => {
    setClickedCity(geo.properties.name);
    dispatcher(getState({ value: geo.properties.name }));
    history.push({
      pathname: "/issues",
      state: { states: geo.properties.name },
    });
  };
           
 <Geographies geography={TUNISIA_TOPO_JSON}>
          {({ geographies }) =>
            geographies.map((geo) => {
              const isClicked = clickedCity === geo.properties.name;
              return (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  fill={isClicked ? "blue" : "red"}
                  stroke="#88c399"
                  strokeWidth="4"
                  onMouseEnter={onMouseEnter(geo, current)}
                  onMouseLeave={onMouseLeave}
                  onClick={() => handleClick(geo)}
                  style={{...}}
                />
              );
            })
          }
</Geographies>

【讨论】：