当基础组件重新渲染时,为什么popper跳到左上角?

纳雷什

我正在使用Material-UI Popper组件(依次使用popper.js)来创建一个悬停工具栏。在大多数情况下,它运行良好,除了一种奇怪的行为:

  1. 选择一些文本:悬停工具栏出现在文本上方-如预期。
  2. 选择工具栏中的任何按钮:执行适当的操作。但是,工具栏会跳到窗口的左上角。见下文。

在此处输入图片说明

您可以在我的故事书中尝试这种行为-只需选择一些文本,然后单击“ T”按钮之一即可。

基本问题围绕着弹出器的位置:

  1. 当用户选择一些文本时,将创建一个假的虚拟元素并将其作为锚元素传递给Popper。Popper使用它anchorEl来定位悬停工具栏。到现在为止还挺好。
  2. 当用户单击工具栏上的按钮时,悬停的工具栏将跳到窗口的左上角。

我猜这是因为基础组件重新渲染时锚元素丢失了而导致的。我不知道为什么,但这只是我的理论。有人可以帮我解决这个问题吗?

计算anchorEl座位的代码位于React中useEffect()我已确保的依赖项列表useEffect正确。我可以看到,当工具栏跳转时,useEffect()不会调用,这意味着anchorEl未在重新计算。这使我相信工具栏应保持原样而不移动到(0,0)。但这没有发生:-(。

这是useEffect()工具栏组件内代码。您可以在我的仓库中找到完整的代码任何帮助将非常感激。

useEffect(() => {
    if (editMode === 'toolbar') {
        if (isTextSelected) {
            const domSelection = window.getSelection();
            if (domSelection === null || domSelection.rangeCount === 0) {
                return;
            }
            const domRange = domSelection.getRangeAt(0);
            const rect = domRange.getBoundingClientRect();
            setAnchorEl({
                clientWidth: rect.width,
                clientHeight: rect.height,
                getBoundingClientRect: () =>
                    domRange.getBoundingClientRect(),
            });
            setToolbarOpen(true);
        } else {
            setToolbarOpen(false);
        }
    } else {
        setToolbarOpen(false);
    }
}, [editMode, isTextSelected, selection, selectionStr]);
瑞安·科格斯威尔(Ryan Cogswell)

我相信您domRangetoggleBlock完成工作后不再有效(由于dom节点被替换了),因此getBoundingClientRect不再返回任何有意义的内容。

您应该能够通过重做将锚点范围内的范围的工作来解决此问题getBoundingClientRect也许像下面这样(我没有尝试执行它,所以不能保证没有小错误):

const getSelectionRange = () => {
  const domSelection = window.getSelection();
  if (domSelection === null || domSelection.rangeCount === 0) {
    return null;
  }
  return domSelection.getRangeAt(0);
};
useEffect(() => {
  if (editMode === "toolbar") {
    if (isTextSelected) {
      const domRange = getSelectionRange();
      if (domRange === null) {
        return;
      }
      const rect = domRange.getBoundingClientRect();
      setAnchorEl({
        clientWidth: rect.width,
        clientHeight: rect.height,
        getBoundingClientRect: () => {
          const innerDomRange = getSelectionRange();
          return innerDomRange === null
            ? null
            : innerDomRange.getBoundingClientRect();
        }
      });
      setToolbarOpen(true);
    } else {
      setToolbarOpen(false);
    }
  } else {
    setToolbarOpen(false);
  }
}, [editMode, isTextSelected, selection, selectionStr]);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

下拉菜单显示在右上角,单击时显示在左上角

为什么窗口的左上角有一个奇怪的白色矩形?

为什么Java 2D起源在左上角?

左上角的浮动JButton

JavaFX窗口在左上角打开,然后跳到中心

左上角的ConstraintLayout视图

为什么PyGame坐标系的原点在左上角?

访问ʻuitable`的左上角

如果“金属原点”位于左上角,为什么此图像在左下角显示?

为什么在状态更新时不响应组件重新渲染?

为什么NavigationView中的动画从左上角开始?

为什么说在函数pygame中未定义左上角?

Docusign API:按标签填充模板的PDF表单字段时,为什么在每个文档的左上角都复制了“文本”选项卡?

为什么无法在Unity中使用wmctrl将窗口移至左上角?

在KDE Windows中,左上角的按钮是什么?

为什么在此... div画中的左上角有方形集会

为什么我的画布仅加载左上角的图像?

为什么slideDown从左上角而不是整个宽度扩展图像?

安装ubuntu时,左上角的白色小屏幕

面板左上角带有摆动组件的网格

光标跳到左上角(Windows 10 VM-KVM)

为什么图像的左上角有水印?

当DropDownStyle为Simple时,ToolStripCombobox显示在屏幕的左上角

为什么角半径仅应用于自定义视图的左上角和右上角?

创建带框架的懒惰按钮时,这是在左上角创建的,为什么会发生这种情况?

以编程方式添加时左上角的 ConstraintLayout 视图

当我尝试使用 pygame.transform.rotate 旋转它时,为什么我的精灵会重置到屏幕的左上角?

例如,当我想用 <4> 使其变大时,为什么文本会移到左上角?

为什么组件不重新渲染?