Question

我试图弄明白为什么onload事件永远不会被调用。所有内容都构建没有错误，类似的onLoad事件在不同的组件中工作。 export class Work扩展了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个事件。

永远不会触发onLoad事件

1 个答案: