Donmclean
12/11/2016 - 7:42 PM

React Snippets

React Snippets

import React, { Component, PropTypes } from 'react';
import _ from 'lodash';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    this.fetchAjaxFromDebouncedInput = _.debounce(this.fetchAjaxFromDebouncedInput, 3000);
  }
  
  fetchAjaxFromDebouncedInput(event) {
    //handle ajax from debounced event here...
  }

  handleKeyStrokes(event) {
    //http://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
    event.persist(); //<--- This is key 
    this.fetchAjaxFromDebouncedInput(event);
  }

  render() {
    return (
      <div className="example-input">
        <input onChange={this.handleKeyStrokes.bind(this)} placeholder="Enter text" type="text"/>
      </div>
    );
  }
}