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

在react中，您具有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;

react中的div元素沒有onLoad事件。