这个错误是由于在获取 `modalRef
.current` 的 `
offsetLeft` 属性时，`modalRef
.current` 的值为 `
null` 引起的。这通常是因为在组件渲染之初获取 `modalRef
.current` 时，可能还未完成 Modal 的挂载。
为了解决这个问题，可以使用 `useEffect` 钩子来确保在获取 `modalRef
.current` 时 Modal 已经挂载。修改代码如下：
```
jsx
import { Modal } from &#
39;antd&#
39;;
import { useState, useRef, useEffect } from &#
39;react&#
39;;
const DraggableModal = ({
visible,
title,
onCancel,
children,
}) => {
const [dragging, setDragging] = useState(false);
const modalRef = useRef();
useEffect(() => {
if (modalRef
.current) {
modalRef
.current
.style
.left = &#
39;100px&#
39;;
modalRef
.current
.style
.top = &#
39;100px&#
39;;
}
}, []);
const handleMouseDown = (e) => {
e
.stopPropagation();
setDragging(true);
document
.addEventListener(&#
39;mousemove&#
39;, handleMouseMove);
document
.addEventListener(&#
39;
mouseup&#
39;, handle
MouseUp);
};
const handleMouseMove = (e) => {
if (!dragging) return;
const modalDOM = modalRef
.current;
modalDOM
.style
.left = `${modalDOM
.offsetLeft + e
.movementX}px`;
modalDOM
.style
.top = `${modalDOM
.offsetTop + e
.movementY}px`;
};
const handle
MouseUp = () => {
setDragging(false);
document
.removeEventListener(&#
39;mousemove&#
39;, handleMouseMove);
document
.removeEventListener(&#
39;
mouseup&#
39;, handle
MouseUp);
};
return (
<Modal
visible={visible}
title={title}
onCancel={onCancel}
mask={false}
ref={modalRef}
footer={
null}
>
<div
onMouseDown={handleMouseDown}
style={{ cursor: &#
39;move&#
39; }}
>
{children}
</div>
</Modal>
);
};
export default DraggableModal;
```
在上述代码中，我们使用 `useEffect` 钩子来在组件挂载后初始化 Modal 的位置。在 `useEffect` 的回调函数中，我们检查 `modalRef
.current` 是否存在，如果存在则设置初始位置为 `left: &#
39;100px&#
39;` 和 `top: &#
39;100px&#
39;`。
这样就可以确保在获取 `modalRef
.current` 的属性之前，Modal 已经成功挂载，避免了 `TypeError:
Cannot read properties
of null` 错误。
修复Vue组件中el-dropdown的鼠标抬起事件错误
当在Vue应用中使用el-dropdown组件并遇到全局mouseup事件触发的‘disabled’属性读取错误时，解决方案可能是删除无效的组件元素，或者在el-dropdown内添加el-dropdown-menu。此问题通常发生在el-dropdown的item子元素设置不当的情况下。
扫一扫
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
