Question

我有一个DIV，其中包含一些内容，我只想使用resize事件缩放DIV。我面临的问题是添加或调度事件的流程，因为我无法获取DIV的宽度。在调整窗口大小时，我总是得到相同的宽度。我使用以下代码获取宽度：

let botWrapDesignAreaGetW = document.querySelector('.botWrapDesignArea').getBoundingClientRect();

输出：

DOMRect {x: 551.5, y: 170.5, width: 480, height: 480, top: 170.5, …}

当我调整窗口大小时，上面对象的宽度应该改变，这没有发生。

调整div大小的代码：

editor.js

export const canvaResizeHorizontal = () => {
    console.log("canvaResizeHorizontal");
    let botWrapDesignAreaWidth = document.querySelector('.botWrapDesignArea').offsetWidth;
    let botWrapDesignAreaGetW = document.querySelector('.botWrapDesignArea').getBoundingClientRect();

    let botWrapCGet = document.querySelector('.botWrapC').offsetWidth;
    console.log(botWrapDesignAreaGetW);

    document.querySelector('.botWrapDesignAreaM').style.width = botWrapDesignAreaGetW.width.toFixed(0) +'px';
    document.querySelector('.botWrapDesignAreaM').style.height = botWrapDesignAreaGetW.height.toFixed(0) +'px';
    document.querySelector('.botWrapTDesignACon').style.width = botWrapDesignAreaGetW.width.toFixed(0) +'px';
    document.querySelector('.botWrapNewPage').style.width = botWrapDesignAreaGetW.width.toFixed(0) +'px';
    document.querySelector('.botWrapDesignAreaM').style.margin = '0px';
    document.querySelector('.botWrapDesignArea').style.width = "480px";
    document.querySelector('.botWrapDesignArea').style.height = "480px";
     if(botWrapCGet <=  botWrapDesignAreaWidth + 200){
        document.querySelector('.botWrapDesignArea').style.transform = "scale(" +  botWrapDesignAreaGetW.width / (botWrapDesignAreaWidth + 200) + ")";
    }
 }

我正在另一个React Component中导入此函数： Main-container.jsx：

class MainContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.threshold = 160;
    const widthThreshold = window.outerWidth - window.innerWidth > this.threshold;
    this.orientation = widthThreshold ? 'vertical' : 'horizontal';
  }

  componentDidMount() {
        init();
        if(this.orientation === 'vertical'){
      console.log("Dev console Vertically open");
     // canvaResizeHorizontal();
     window.dispatchEvent(new Event('resize')); 
      window.addEventListener('resize', canvaResizeHorizontal)

      //canvaResizeHorizontal();

    }else{
      console.log("Dev console Horizontally open")
      window.addEventListener('resize', canvaResizeVertical);
      window.dispatchEvent(new Event('resize'));
      canvaResizeVertical();

    }
  }

ComponentDidMount的 else 部分中的代码可以正常工作，在console.log("Dev console Vertically open")的情况下（即在 if 的情况下），该代码无法正常工作。

有人可以指出我在这里我哪里错了！

添加和调度事件流程中的问题

0 个答案: