Question

我尝试拨打＆＃34; setHolePosition＆＃34;调整大小事件的方法，但this.hole是空的，但第一次它工作正常。当我调整窗口大小时，console.log显示空数组，我不明白为什么？我可以在ref应用程序中存储refs

import React, {Component} from 'react';
import $ from 'jquery';

import './indexPageStyles.sass';

class IndexPageComponent extends Component {
  showHole() {
    setTimeout(() => {
      this.hole.addClass('hole--visible');
      this.setHolePosition();
    }, 1000)
  }
  setHolePosition(){

    const doc = $(document);
    let dh = doc.height();
    let dw = doc.width();

    console.log(this.hole);

    this.hole.css({
      top: dh / 2 - $(this.hole).height() / 2,
      left: dw / 2 - $(this.hole).width() / 2
    });


    // TODO: unbind this listener
    window.addEventListener('resize', this.setHolePosition);
  }

  render() {
    return (
      <div className="indexPage">
        <div className="hole" ref={(hole) => {
          this.hole = $(hole);
          this.showHole();
        }}></div>
      </div>
    )
  }
}

export default IndexPageComponent;

Answer 1

忘记绑定方法到组件。 this.setHolePosition = this.setHolePosition.bind(this);

调整大小事件时缺少ref节点

1 个答案: