antd预览关闭弹出框

Question

我在 antd popover 中使用 antd 图像并打开图像的预览，然后如果我单击预览或关闭预览，这也会导致弹出窗口关闭，我该如何防止这种情况？

我已经尝试过了

<div onClick={stopPropagation} id="circle-image">
      <StyledImage
        onClick={stopPropagation}
        className="image"
        height={props.height || 40}
        width={props.width || 40}
        border={props.border}
        maxHeight={props.height || 40}
        {...imgProps}
        src={mainSource}
        alt="circle-image"
        key={props.index}
        preview={
          isPreview
            ? {
                destroyOnClose: true,
                src: preview,
                mask: (
                  <div className="custom-mask">
                    <EyeOutlined />
                  </div>
                ),
              }
            : false
        }
      />
    </div>

但没有成功

Answer 1

我之前在 Popover 中使用 Ant Design 的 Image 组件时遇到过这个问题，我理解它是多么令人沮丧。出现问题的原因是，当打开或关闭图像预览时，单击事件也会传播到 Popover，导致其关闭。

我是这样处理的：

停止事件传播：您使用 stopPropagation 的方法是正确的，但请确保将其应用在正确的位置。点击事件需要在图像和 Popover 的触发级别停止。

这是我如何应用它的示例：

`const stopPropagation = (e) => {
  e.stopPropagation();
};

<Popover
  content={<span>Popover Content</span>}
  trigger="click"
>
  <div onClick={stopPropagation}>
    <Image
      preview={{
        visible: isPreviewVisible,
        onVisibleChange: (visible) => {
          setIsPreviewVisible(visible);
        },
      }}
      src={imageUrl}
      onClick={stopPropagation}
    />
  </div>
</Popover>
`

单独管理预览可见性：我发现手动管理预览可见性状态有助于防止弹出窗口关闭。在上面的代码中，我使用状态变量 isPreviewVisible 来控制预览何时可见，并应用 onVisibleChange 方法来确保触发预览时 Popover 不会关闭。

触发模式：根据您的用例，您可能需要检查将 Popover 的触发属性更改为悬停或其他选项是否有助于最大限度地减少交互冲突。

如果仍然无法解决问题，请尝试通过将弹出窗口和图像包装在单独的组件中来隔离弹出窗口逻辑，并确保独立处理每个组件的事件。

让我知道这种方法是否适合您！