react-leaflet 和传单可编辑：在活动期间创建额外的标记？

如何解决react-leaflet 和传单可编辑：在活动期间创建额外的标记？

我正在尝试实现这样的功能：在放置带有传单可编辑的标记时，按住控制键同时单击以放置标记，然后立即初始化要放置的另一个标记。结果将是用户可以控制以快速地将多个标记排成一行。

我尝试通过响应 editable:drawing:commit 事件并在那里调用 map.editTools.createMarker 来实现此功能。但是，这样做似乎没有效果；放置标记后，用户离开编辑模式，必须手动开始放置另一个标记。

我也尝试响应 editable:drawing:end，但是这似乎有不一致的行为，有时它会像描述的那样运行，有时它不会放置第二个标记。

Here is the CodeSandbox 我能够在其中重现一个最小的示例。事件处理方式是否存在错误，或者我只是捕获了错误的事件？

解决方法

我花了一些时间玩这个，问题是反应中 useState 调用的异步性质。当你这样做时：

"editable:drawing:commit": (event) => {
  if (event.originalEvent.ctrlKey) {
    setAdditionalMarker(true);
  }
},

这种状态变化不是立即的。当放置单个标记时，似乎 drawing:end 事件会在 drawing:commit 事件之后立即发生。因此，当您侦听 end 事件时：

"editable:drawing:end": (event) => {
  if (additionalMarker) {
    addMarker();
    setAdditionalMarker(false);
  }
}

additionalMarker 还不是真的，因为 setAdditionalMarker(true) 还没有注册 react，因为它是异步的。因此永远不会调用 if 语句。

从 UX 的角度来看，这也有点没有意义，因为即使 useState 是同步的，如果用户在单击时按住 ctrl，但在再次单击地图之前释放了 ctrl 键，它将保持在编辑模式。但是在键盘上，它应该退出编辑模式。我的做法是将 keyup 和 keydown 侦听器附加到 文档。在 keydown 上我们可以 setAdditionalMarker(true)，而在 keyup 上则相反。如果 additionalMarkers 为真，我们会在点击事件后重新触发 addMarkers()。但是，如果发生 keyup 事件，我们可以调用 map.editTools.commitDrawing() 强制退出编辑模式，页面光标恢复正常。

我们仍然有异步 useState 问题，因为在 keyup 时，我们将 additionalMarkers 设置为 false，并同时触发 editable:drawing:end 事件，但是 {{ 1}} 是异步的，所以 setAdditionalMarkers 仍然是真的，我们陷入了可编辑模式。为了解决这个问题，我将 additionalMarkers 包裹在 50 毫秒的超时时间内，以便它在异步 useState 调用完成之后发生。它有点hacky，但它有效并且有利于用户体验。可能有更合适的方法来做到这一点。

Working codesandbox

**注意：我使用的是 mac，所以我将 lsiten 的键更改为左侧命令键...您可能需要调整 Windows 或跨平台兼容性的 keydown 和 keyup 事件中的键码.