记录一个react开发遇到的场景

75 阅读1分钟

需求场景:

在react函数组件中的antd模态框上加一个可拖动的功能; 我是准备这样实现的

    var y;
    var login: any = document.querySelectorAll('.talkDialog')?.[0];
    login.addEventListener('mousedown', function (e) {
      // 鼠标点击时获取鼠标与容器相对位置,保持两者位置不变
      y = e.pageY - login.offsetTop;
      x = e.pageX - login.offsetLeft;
      login.addEventListener('mousemove', move);
    });

    var move = function (e) {
      login.style.left = e.pageX - x + 'px';
      login.style.top = e.pageY - y + 'px';
    };

    // 鼠标弹起则移除事件,固定位置
    login.addEventListener('mouseup', function () {
      login.removeEventListener('mousemove', move);
    });

但是遇到了一个问题,modal显示是异步的,第一次关闭之后,无法获取到modal的元素, 只能在onMouseEnter中获取,每次组件更新完document为啥就为空有大佬知道不?