Question

要运行imagesrore函数onload，我必须调用<img src="image_7.jpg" className="hide" alt="image_7.jpg"/> image，但实际上没有使用此行，如果我删除了此onload，将无法正常工作，并且不会调用该函数。因此，如何在react中调用imagestore（）onload。

class PicturesList extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
          imagesarray: []
          };
          this.imagestore = this.imagestore.bind(this);
        }
        render() {
          return (
          <div>
            <div onLoad= {() => this.imagestore()}>
                <img src="image_7.jpg" className="hide" alt="image_7.jpg"/>
                // To run the imagesrore function onload I have to call this image but actually there is no use of this line and if I remove this onload doesn't work and function is not called
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
          );
        }
        imagestore()
        {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
        }

      }

我想要什么

class PicturesList extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
              imagesarray: []
              };
              this.imagestore = this.imagestore.bind(this);
            }
            render() {
              return (
              <div>
                <div onLoad= {() => this.imagestore()}>

                    // but when I did this imagestore() function not called
                </div>
                <Gallery url={this.state.imagesarray}/>
              </div>
              );
            }
            imagestore()
            {
            const imgUrls=this.props.apikeys;
            const objarr = Object.values(imgUrls);
            this.setState({
                imagesarray: objarr
            });
            }

          }

Answer 1

您可以直接将其加载到componentDidMount中，而不是呈现不需要的图像，就像

class PicturesList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      imagesarray: []
      };
      this.imagestore = this.imagestore.bind(this);
    }

    componentDidMount() {
       const img = new Image();
        img.onload =() => {
          // image  has been loaded
          this.imagestore()
        };

        img.src = 'image_7.jpg';
    }
    render() {
       return (
          <div>
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
       );
    }
    imagestore() {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
    }

}

以上解决方案仅是在加载图像后调用imageStore。但是，如果您打算在组件完全加载后调用imageStore，则只需在componentDidMount

中触发this.imageStore()

class PicturesList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      imagesarray: []
      };
      this.imagestore = this.imagestore.bind(this);
    }

    componentDidMount() {
        this.imagestore()
    }
    render() {
       return (
          <div>
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
       );
    }
    imagestore() {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
    }

}

Answer 2

您的onLoad函数应该在<img>标签上使用，而不是<div/>。

如何在反应中使用onload？

2 个答案: