![](/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.