单击时更改区域颜色(react-simple-maps)

Question

我使用的是react simple maps。我创建了一个美国地图，我需要在点击时更改状态的颜色。我可以通过向Geography组件添加一个press style prop来更改它，但是当click事件结束时，颜色会恢复为默认颜色。有没有办法让点击的颜色保持不变？

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