在調整大小事件時缺少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);