我正在使用Material-UI Popper组件(依次使用popper.js)来创建一个悬停工具栏。在大多数情况下,它运行良好,除了一种奇怪的行为:
您可以在我的故事书中尝试这种行为-只需选择一些文本,然后单击“ T”按钮之一即可。
基本问题围绕着弹出器的位置:
anchorEl
来定位悬停工具栏。到现在为止还挺好。我猜这是因为基础组件重新渲染时锚元素丢失了而导致的。我不知道为什么,但这只是我的理论。有人可以帮我解决这个问题吗?
计算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]);
我相信您domRange
在toggleBlock完成工作后不再有效(由于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] 删除。
我来说两句