检查对话框是否已经打开

Question

我正在开发一个应用程序，我在其中显示地图和带有标记的多个不同位置。可以单击这些标记以打开简单的对话框，其中显示有关该特定位置的一些信息。这是代码示例：

通过位置数组进行映射并在每个标记上调用函数。

      {markers && (
    <>
      {markers.map((marker, idx) => (
        <MarkerDialog key={idx} marker={marker} />
      ))}
    </>
  )}

正在向标记添加对话框。

const MarkerDialog = ({ marker }) => {
const [dialog, setDialog] = useState(false);

const handleClickOpen = () => {
setDialog(true);
};

const handleClose = () => {
setDialog(false);
};

const handleMarkerClick = (e, marker) => {
if (dialog) {
  handleClose();
} else {
  handleClickOpen();
}
};

return (
<div>
  <Marker
    position={marker.location}
    icon={status(marker)}
    eventHandlers={{
      click: handleMarkerClick,
    }}
  />

  {dialog && (
    <Dialog
      marker={marker}
      dialog={dialog}
      handleClose={handleClose}
    />
  )}
</div>
);
};

export default MarkerDialog;

如果您单击多个标记，这会产生问题。在那种情况下，对话框会相互堆叠，因为应用程序永远不会关闭前一个对话框。

如果我单击标记并打开对话框，然后我将去单击另一个标记，我希望之前的对话框关闭。我怎样才能做到这一点？

Answer 1

提升状态，保持选中索引为点击marker。

MarkerDialog

const MarkerDialog = ({ marker,  handleMarkerClick, handleClose,dialog }) => {
  return (
    <div>
      <Marker
        position={marker.location}
        icon={status(marker)}
        eventHandlers={{
          click: handleMarkerClick
        }}
      />

      {dialog && (
        <Dialog marker={marker} dialog={dialog} handleClose={handleClose} />
      )}
    </div>
  );
};

export default MarkerDialog;

Parent

const [selectedMarkerIndex, setSelectedMarkerIndex] = useState(null);

const handleClose = () => {
  setSelectedMarkerIndex(-1)
};

const handleMarkerClick = (e, marker,index) => {
  /* Do stuff with e and marker */
  setSelectedMarkerIndex(index)
};

{
  markers && (
    <>
      {markers.map((marker, idx) => (
        <MarkerDialog
          key={idx}
          marker={marker}
          handleMarkerClick={(e, marker) => handleMarkerClick(e, marker, idx)}
          handleClose={handleClose}
          dialog={idx === selectedMarkerIndex}
        />
      ))}
    </>
  );
}

检查对话框是否已经打开

Check if Dialog is already open

javascript

toggle

leaflet

reactjs

react-leaflet