React Mapbox额外按钮在弹出窗口中不起作用

Question

我正在使用mapbox react gl-到目前为止，它工作得非常好……除了一件事。用户可以将他们的家乡位置添加到地图上。出现家乡位置时，可以单击它以查看弹出窗口。我希望用户能够从弹出窗口内部从地图中删除位置-因此，我添加了一个函数，当单击按钮时，该函数将从数据库中删除位置。问题是，当按钮位于弹出窗口中时，该功能不会触发-我也不知道为什么。

我已经弄乱了按钮的z索引，但是似乎每当单击按钮时，就会调用onClose函数而不是我的handleDeleteHome函数...

编辑*如果删除onClose函数，则将触发handleDeleteHome函数。

需要任何帮助！谢谢！

{selectedHome && (
                            <Popup 
                                latitude={bandLocation[0]} 
                                longitude={bandLocation[1]}
                                onClose={() => {setSelectedHome(null)}}
                                offsetLeft={23}
                                offsetTop={-10}
                                >
                                    <div>
                                        <h4>Home Town</h4>
                                        <Button 
                                            onClick={(e) => {
                                            e.preventDefault()
                                            handleDeleteHome()
                                        }} 
                                        color="danger">x</Button>
                                    </div>
                            </Popup>
                        )}

Answer 1