Реагирует. js функция не вызывается при событии компонента - PullRequest
Новая
       9

Реагирует. js функция не вызывается при событии компонента

0 голосов
/ 30 января 2020

Я новичок в React. js и, возможно, этот вопрос довольно размытый, пожалуйста, будьте добры. Я использую Reaction-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} />
        )
      }
    }

Я предполагаю, что это проблема определения функций и что-то в этом роде. Некоторые советы и рекомендации будут оценены. Thanks!

Просмотреть полный код файла Здесь

Ответы [ 2 ]

0 голосов
/ 30 января 2020

enter image description here Решенная проблема, определите ваши изображения как 

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;
0 голосов
/ 30 января 2020

если вы получаете сообщение об ошибке, например, «EVENTNAME» не определено no-undef, если это так, добавьте объявление перед определением функции. 

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