组件事件上未调用 React.js 函数答案

【问题标题】：React.js function not being called on component event组件事件上未调用 React.js 函数
【发布时间】：2020-01-30 04:46:37
【问题描述】：

我是 React.js 的新手，也许这个问题有点含糊，请善待。我正在使用react-image-gallery 在我的组件中创建一个画廊。这个画廊组件有一个回调函数 onImageLoad 的道具，它在加载图像时调用（我正在使用延迟加载）。问题是这个 onImageLoad 道具能够直接执行 console.log('called') 但它不会触发任何事件。所以这行得通：

class Post extends React.Component {
  render() {
    return (
      <ImageGallery onImageLoad={console.log('called')} />
    )
  }
}

但这些不起作用：

class Post extends React.Component {
  EVENTNAME = e => {
    console.log('called', e);
  }
  render() {
    return (
      <ImageGallery onImageLoad={this.EVENTNAME.bind(this)} />
    )
  }
}

这也不起作用：

class Post extends React.Component {
  EVENTNAME = e => {
    console.log('called', e);
  }
  render() {
    return (
      <ImageGallery onImageLoad={e => this.EVENTNAME} />
    )
  }
}

也不是这个：

class Post extends React.Component {
  EVENTNAME = e => {
    console.log('called', e);
  }
  render() {
    return (
      <ImageGallery onImageLoad={e => console.log('called', e)} />
    )
  }
}

也试过这个：

class Post extends React.Component {
      EVENTNAME = e => {
        console.log('called', e);
      }
      render() {
        return (
          <ImageGallery onImageLoad={this.EVENTNAME} />
        )
      }
    }

我猜这是函数范围的问题和类似的问题。一些提示和指导将不胜感激。谢谢！

查看完整文件代码Here

【问题讨论】：

我建议您将EVENTNAME 声明移到render 方法之外，并将其称为this. EVENTNAME 而不是this.EVENTNAME.bind(this)。箭头函数使用词法this，所以我们不必绑定它们
@Fiju 已经尝试过了，但不起作用。我已经更新了这个问题。感谢您的回复。

标签： javascript reactjs function scope

【解决方案1】：

您是否收到类似 'EVENTNAME' is not defined no-undef 之类的错误如果是这样的话，在函数定义前添加声明。

 let EVENTNAME = e => {
          console.log('called', e);
        }

【讨论】：

嗨，不，我没有收到任何错误。它只是没有调用任何函数。是的，我尝试过通过变量声明函数，可悲的是，它不起作用。
可能是的。您可能想查看我的文件的完整代码。在这里查看：codesandbox.io/s/…
它实际上被调用 onImageLoad.. 有什么问题？

【解决方案2】：

问题已解决，将图像定义为

import React from "react";
import ImageGallery from "react-image-gallery";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slidesLoaded: 0
    };
  }

  images = [
    {
      original: "https://picsum.photos/id/1018/1000/600/",
      thumbnail: "https://picsum.photos/id/1018/250/150/"
    },
    {
      original: "https://picsum.photos/id/1015/1000/600/",
      thumbnail: "https://picsum.photos/id/1015/250/150/"
    },
    {
      original: "https://picsum.photos/id/1019/1000/600/",
      thumbnail: "https://picsum.photos/id/1019/250/150/"
    }
  ];

  checkAndShowSlider = e => {
    console.log("called", e);
    let count = this.images.length;
    let nowLoaded = this.state.slidesLoaded + 1;
    if (nowLoaded === count) {
      document.querySelector(".images.section").css("display", "block");
    }
    this.setState(() => {
      return {
        slidesLoaded: nowLoaded
      };
    });
  };

  render() {
    return (
      <div className="App">
        <ImageGallery
          onImageLoad={e => this.checkAndShowSlider(e)}
          items={this.images}
          showPlayButton={false}
          thumbnailPosition="left"
          useBrowserFullscreen={false}
        />
      </div>
    );
  }
}

export default App;

【讨论】：

如果您有任何疑问，请告诉我
您好 Prakash，感谢您的回复。我刚试过，它对我不起作用。你想看看我的文件的完整代码吗？
this.EVENTNAME(e)} items={images} />
您可以将事件作为参数传递给您的函数，例如：this.EVENTNAME(e)
是的，我只是在看到您的回答后尝试过。它不适合我。