Javascript 组件事件中未调用React.js函数

我是React.js的新手，也许这个问题有点含糊不清，请友好一点。我正在使用在我的组件中创建库。这个gallery组件有一个回调函数

onImageLoad

，在加载图像时调用该函数（我使用的是延迟加载）。问题是这个

onImageLoad

prop能够直接执行

console.log（'called'）

，但它不会触发任何事件。所以这是可行的：

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

class Post扩展了React.Component{
render（）{
返回(
)
}
}

但这些都不起作用：

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

class Post扩展了React.Component{
EVENTNAME=e=>{
console.log（'called'，e）；
}
render（）{
返回(
)
}
}

这也不起作用：

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

class Post扩展了React.Component{
EVENTNAME=e=>{
console.log（'called'，e）；
}
render（）{
返回(
this.EVENTNAME}/>
)
}
}

也不是这个：

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

class Post扩展了React.Component{
EVENTNAME=e=>{
console.log（'called'，e）；
}
render（）{
返回(
console.log（'called'，e）}/>
)
}
}

我也尝试过这一点：

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

class Post扩展了React.Component{
EVENTNAME=e=>{
console.log（'called'，e）；
}
render（）{
返回(
)
}
}

我猜这是函数作用域之类的问题。一些提示和指导将不胜感激。谢谢

查看完整文件代码

---

您是否遇到类似“EVENTNAME”未定义的错误？no undef 如果是这样的话， 在函数定义前面添加声明

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

问题已解决将图像定义为

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;

从“React”导入React；
从“react image gallery”导入ImageGallery；
导入“/styles.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
已加载幻灯片：0
};
}
图像=[
{
原件：“https://picsum.photos/id/1018/1000/600/",
缩略图：“https://picsum.photos/id/1018/250/150/"
},
{
原件：“https://picsum.photos/id/1015/1000/600/",
缩略图：“https://picsum.photos/id/1015/250/150/"
},
{
原件：“https://picsum.photos/id/1019/1000/600/",
缩略图：“https://picsum.photos/id/1019/250/150/"
}
];
checkAndShowSlider=e=>{
console.log（“称为”，e）；
让计数=this.images.length；
让nowload=this.state.slidesload+1；
如果（现在加载===计数）{
document.querySelector（“.images.section”）.css（“显示”、“块”）；
}
此.setState（（）=>{
返回{
slidesLoaded:nowLoaded
};
});
};
render（）{
返回(
this.checkAndShowSlider（e）}
items={this.images}
showPlayButton={false}
thumbnailPosition=“左”
useBrowserFullscreen={false}
/>
);
}
}
导出默认应用程序；

我建议您将

EVENTNAME

声明移到

render

方法之外，并像

这样调用它。EVENTNAME

而不是

this.EVENTNAME.bind（this）

。箭头函数使用词法

这个
，所以我们不必绑定them@Fiju我试过了，没用。我已经更新了问题。谢谢你的回复。如果你有任何疑问，请告诉我，谢谢你的回复。我刚试过，对我没用。你想看看我文件的完整代码吗？this.EVENTNAME（e）}items={images}/>您可以将事件作为参数传递给函数，如下所示：this.EVENTNAME（e）是的，我只是在看到您的答案后尝试了一下。这对我不起作用。嗨，不，我没有任何错误。它只是不调用任何函数。是的，我尝试过通过变量声明函数，遗憾的是，它不起作用。您可能想查看我的文件的完整代码。检查这里：它实际上被称为onImageLoad。。有什么问题？