web-dev-qa-db-fra.com

Lodash rebounce avec React Input

J'essaie d'ajouter un anti-rebond avec lodash à une fonction de recherche, appelée à partir d'un événement input onChange. Le code ci-dessous génère une erreur de type 'fonction est attendue', ce que je comprends car lodash attend une fonction. Quelle est la bonne façon de faire cela et peut-on le faire tout en ligne? J'ai essayé presque tous les exemples jusqu'à présent sur SO sans succès. 

search(e){
 let str = e.target.value;
 debounce(this.props.relay.setVariables({ query: str }), 500);
},
reactjslodashrelay
7
Michael Kaufman

La fonction debounce peut être passée en ligne dans JSX ou définie directement en tant que méthode de classe, comme indiqué ici: 

search: _.debounce(function(e) {
  console.log('Debounced Event:', e);
}, 1000)

Fiddle:https://jsfiddle.net/woodenconsulting/69z2wepo/36453/

Si vous utilisez es2015 +, vous pouvez définir votre méthode anti-rebond directement, dans votre constructor ou dans une méthode de cycle de vie telle que componentWillMount.

Exemples:

class DebounceSamples extends React.Component {
  constructor(props) {
    super(props);

    // Method defined in constructor, alternatively could be in another lifecycle method
    // like componentWillMount
    this.search = _.debounce(e => {
      console.log('Debounced Event:', e);
    }, 1000);
  }

  // Define the method directly in your class
  search = _.debounce((e) => {
    console.log('Debounced Event:', e);
  }, 1000)
}
15
Jeff Wooden

Ce n'est pas une question si facile

D'une part, pour contourner l'erreur que vous obtenez, vous devez vous terminer setVariables dans la fonction:

 search(e){
  let str = e.target.value;
  _.debounce(() => this.props.relay.setVariables({ query: str }), 500);
}

D'autre part, je pense que la logique anti-rebond doit être intégrée dans Relay.

1
vittore