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

Question

我尝试在resize事件上调用“setHolePosition”方法，但this.hole为空，但第一次工作正常。当我调整窗口大小时，console.log显示空数组，我不明白为什么？并且我可以在反应中存储参考应用程序

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);