How To Set Timeout On Event Onchange

I have a gallery that show images, and i have a search textbox Im Trying to use Timeout on Input event to prevent the api call on every letter im typing : I try to handle the event

Solution 1:

First of all why do you need to use setTimeout to set value that is entered by user. I don't see any use using setTimeout in doSearch function.

The reason your doSearch function won't work because you are not binding it.

You can directly set value to tag using setState in doSearch function in following ways.

ES5 way

constructor(props){
    super(props);
    this.doSearch = this.doSearch.bind(this);
}

doSearch(event){
    this.setState({
       tag: event.target.value
    });
}

ES6 way

doSearch = (event) => {
    this.setState({
       tag: event.target.value
    });
}

Doing setState inside setTimeout in doSearch function won't work because input tag has value assigned.

ES5 way

constructor(props){
    super(props);
    this.doSearch = this.doSearch.bind(this);
}

doSearch(event){
     if(this.timeout) clearTimeout(this.timeout);
     this.timeout = setTimeout(function(){
       this.setState({
          tag: event.target.value
       }) 
     }.bind(this),500);
}

setTimeout in ES6 way

doSearch = (event) => {
     if(this.timeout) clearTimeout(this.timeout);
     this.timeout = setTimeout(() => {
       this.setState({
          tag: event.target.value
       }) 
     },500);
}

Gallery component:

Check current props changes with previous change in componentWillRecieveProps to avoid extra renderings.

Try with below updated code

importReactfrom'react';
importPropTypesfrom'prop-types';
import axios from'axios';
importImagefrom'../Image';
import'./Gallery.scss';

classGalleryextendsReact.Component {
  static propTypes = {
    tag: PropTypes.string
  };

  constructor(props) {
    super(props);
    this.state = {
      images: [],
      galleryWidth: this.getGalleryWidth()

    };
  }

  getGalleryWidth(){
    try {
      returndocument.body.clientWidth;
    } catch (e) {
      return1000;
    }
  }
  getImages(tag) {
    const getImagesUrl = `services/rest/?method=flickr.photos.search&api_key=522c1f9009ca3609bcbaf08545f067ad&tags=${tag}&tag_mode=any&per_page=100&format=json&safe_search=1&nojsoncallback=1`;
    const baseUrl = 'https://api.flickr.com/';
    axios({
      url: getImagesUrl,
      baseURL: baseUrl,
      method: 'GET'
    })
      .then(res => res.data)
      .then(res => {
        if (
          res &&
          res.photos &&
          res.photos.photo &&
          res.photos.photo.length > 0
        ) {
          this.setState({images: res.photos.photo});
        }
      });
  }

  componentDidMount() {
    this.getImages(this.props.tag);
    this.setState({
      galleryWidth: document.body.clientWidth
    });
  }

  componentWillReceiveProps(nextProps) {
     if(nextProps.tag != this.props.tag){
        this.getImages(props.tag);
     }
  }

  shouldComponentUpdate(nextProps, nextState) {
      if(this.props.tag == nextProps.tag){
          returnfalse;
      }else{
          returntrue;
      }
  }

  render() {
    return (
      <divclassName="gallery-root">
        {this.state.images.map((dto , i) => {
          return <Imagekey={'image-' + dto.id+ i.toString()} dto={dto}galleryWidth={this.state.galleryWidth}/>;
        })}
      </div>
    );
  }
}

I am keeping tag initial value to empty as you are not doing anything with value art.

Please try with below code

classAppextendsReact.Component {
  static propTypes = {
  };

  constructor() {
    super();
    this.timeout =  0;
    this.state = {
      tag: '',
      callGallery: false
    };
  }


  doSearch = (event) => {
    this.setState({tag: event.target.value, callGallery: false});
  }

  handleSearch = () => {
     this.setState({
        callGallery: true
     });
  }

  render() {
    return (
      <divclassName="app-root"><divclassName="app-header"><h2>Gallery</h2><inputclassName="input"onChange={event => this.doSearch(event)} value={this.state.tag}/>
         <inputtype="button"value="Search"onClick={this.handleSearch} /></div>
        {this.state.callGallery && <Gallerytag={this.state.tag}/>}
      </div>
    );
  }
}

exportdefaultApp;

Solution 2:

This is because you haven't bound this to your method.

Add the following to your constructor:

this.doSearch = this.doSearch.bind(this);

---

Also, you don't need the fat arrow notation for onChange. Just do:

onChange={this.doSearch}

Solution 3:

onChange handler is just fine but you need to bind the setTimeout to render context.Currently,it is referring to window context.And the code as follows

doSearch(event){
        var searchText = event.target.value; // this is the search textif(this.timeout) clearTimeout(this.timeout);
        this.timeout = setTimeout(function(){
                         this.setState({
                             tag: event.target.value
                         }) 
                       }.bind(this),500);
      }