在功能组件中单击时仅更新子项答案

【问题标题】：updating only a child on click in a function component在功能组件中单击时仅更新子项
【发布时间】：2021-04-12 17:21:25
【问题描述】：

我正在尝试制作一个带有多边形的谷歌地图应用程序。我得到了一个函数组件，它可以同时渲染 GoogleMap 和 Polygon 对象。当我单击一个多边形时，我想更新单击的多边形的颜色并将所有其他多边形的颜色重置为默认值。我的代码基本上是这样的：


export default function MyDashComponent
  const [mapOptions, setMapOptions] = ...

..

  function click(i){
        setMapOptions({strokeColor: "#212527",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#05628A",
            fillOpacity: 0.35,
            polygonKey: 1});
    }
...
render
  <GoogleMap>
       {list_poly.map(function(object, i){
          
          return(
        <Polygon key={i}  path={object} onClick={(i)=>click(i)} options={mapOptions} 
  </GoogleMap>

如您所见，它只会暂时更新整个多边形。我该怎么办？

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以创建一个状态来存储被点击元素的索引。如果当前索引等于状态中的索引，则可以设置 mapOptions。

您可以查看此演示以供参考：https://stackblitz.com/edit/map-css?file=src/App.js

【讨论】：