![](/img/trans.png)
[英]calling function in onopen event of websocket in React.js component
[英]React.js function not being called on component event
我是 React.js 的新手,也许这个问题有点模糊,请善待。 我正在使用react-image- gallery 在我的组件中创建一个画廊。 这个画廊组件有一个回调函数onImageLoad
的道具,它在加载图像时被调用(我正在使用延迟加载)。 问题是这个onImageLoad
道具能够直接执行console.log('called')
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} />
)
}
}
我猜这是函数作用域和类似问题的问题。 一些提示和指导将不胜感激。 谢谢!
在此处查看完整的文件代码
您是否收到类似 ,'EVENTNAME' is not defined 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.