onLoad事件永遠不會觸發

Question

我想弄清楚爲什麼onload事件永遠不會被調用。所有內容都沒有錯誤，類似onLoad事件在不同的組件中起作用。 出口類工作擴展React.Component {

constructor(props) { 
    super(props); 


    this.state = { 
     allImgLoaded: false, 
     boxHovered: false, 
     projects: projects 
    } 
this.handleWorkLoad = this.handleWorkLoad.bind(this); 

    } 

componentWillMount() { 
    window.scrollTo(0,0); 
} 

handleWorkLoad() { 
    console.log("called"); 
    this.setState({ 
    allImgLoaded: true 
    }) 
} 

    render() { 

    return (
    <div className={this.state.allImgLoaded ? "work" : "work invisible"} onLoad={this.handleWorkLoad}> 

     </div>  
    ); 
    } 
}; 

export default Work; 

Answer 1

在反應你有componentDidMount方法，讓你以後組件完成它的裝載階段來運行特定代碼的能力：

class Work extends React.Component { 
    constructor(props) { 
     super(props); 


     this.state = { 
      allImgLoaded: false, 
      boxHovered: false, 
      projects: projects 
     } 
     this.handleWorkLoad = this.handleWorkLoad.bind(this); 

    } 

    componentWillMount() { 
     window.scrollTo(0,0); 
    } 

    componentDidMount() { 
     this.handleWorkLoad() 
    } 

    handleWorkLoad() { 
     console.log("called"); 
     this.setState({ 
      allImgLoaded: true 
     }) 
    } 

    render() { 

     return (
      <div className={this.state.allImgLoaded ? "work" : "work invisible"}> 
      </div>  
     ); 
    } 
}; 

export default Work; 

沒有onLoad事件爲div元素反應。