React传单使一个标记忽略其事件，因此可以单击其他标记

Question

我有这样的代码：

return <React.Fragment key={i + 100}>
                            <MapMarker
                              obj={object}
                              key={i}
                              position={positionMap[i]}
                              icon={objIcon}
                              objName={convDataArr[1]}
                              objType={convDataArr[2]}
                              objStatus={convDataArr[3]}
                              objcoalition={convDataArr[4]}
                              objUnderAttack={convDataArr[5]}
                              objNumUnits={convDataArr[6]}
                              pane={convDataArr[2]}
                              zIndexOffset={100}
                            //riseOnHover={true}
                            ></MapMarker>
                            <FlameMarker
                              key={i + 1000}
                              position={positionMap[i]}
                              icon={iconArray[21]}
                            >
                            </FlameMarker>
                          </React.Fragment>

输出 2 个标记。 FlameMarker 与普通标记几乎相同。问题是，当绘制两个标记时，从可见性角度来看，所有内容都有效，显示目标标记，并显示动画火焰 gif。但是，我无法单击我的主标记，它是透明的，然后单击地图。我尝试使用

eventHandlers = {{
click: () => {}
},
}}

但是 gif 是可点击的，这不是我想要的。当在 Chrome 中的开发者模式下手动添加 CSS 时，它可以工作，但是考虑到 React leaflet 只是删除给定的每个样式并使用它自己的样式，我如何手动添加此样式？

Answer 1

问题在于 MapMarker 组件的 eventHandlers 属性覆盖了默认的单击事件处理程序。默认的单击事件处理程序使标记可单击。

要解决这个问题，可以使用MapMarker组件的disableClick属性。 disableClick 属性将阻止标记可点击。

这是更正后的代码：

return <React.Fragment key={i + 100}>
                        <MapMarker
                          obj={object}
                          key={i}
                          position={positionMap[i]}
                          icon={objIcon}
                          objName={convDataArr[1]}
                          objType={convDataArr[2]}
                          objStatus={convDataArr[3]}
                          objcoalition={convDataArr[4]}
                          objUnderAttack={convDataArr[5]}
                          objNumUnits={convDataArr[6]}
                          pane={convDataArr[2]}
                          zIndexOffset={100}
                          disableClick
                        ></MapMarker>
                        <FlameMarker
                          key={i + 1000}
                          position={positionMap[i]}
                          icon={iconArray[21]}
                        >
                        </FlameMarker>
                      </React.Fragment>

在此代码中，MapMarker 组件的disableClick 属性设置为true。这将阻止标记被点击。

您还可以使用MapMarker组件的onClick属性来定义您自己的点击事件处理程序。单击标记时将调用 onClick 属性。

以下是带有自定义单击事件处理程序示例的代码：

return <React.Fragment key={i + 100}>
                        <MapMarker
                          obj={object}
                          key={i}
                          position={positionMap[i]}
                          icon={objIcon}
                          objName={convDataArr[1]}
                          objType={convDataArr[2]}
                          objStatus={convDataArr[3]}
                          objcoalition={convDataArr[4]}
                          objUnderAttack={convDataArr[5]}
                          objNumUnits={convDataArr[6]}
                          pane={convDataArr[2]}
                          zIndexOffset={100}
                          onClick={() => {
                            // Do something when the marker is clicked
                          }}
                        ></MapMarker>
                        <FlameMarker
                          key={i + 1000}
                          position={positionMap[i]}
                          icon={iconArray[21]}
                        >
                        </FlameMarker>
                      </React.Fragment>

在此代码中，onClick 属性设置为单击标记时将调用的函数。该函数可以执行您想要的任何操作，例如打开新窗口或播放声音。

我希望这有帮助！如果您还有其他问题，请告诉我。