2016-03-29 33 views
3

Ich versuche, Debouncing mit Lodash zu einer Suchfunktion hinzuzufügen, die von einem Input onChange-Ereignis aufgerufen wird. Der folgende Code generiert einen Typfehler "Funktion wird erwartet", die ich verstehe, da Lodash eine Funktion erwartet. Was ist der richtige Weg und kann alles inline gemacht werden? Ich habe bisher fast jedes Beispiel auf SO vergeblich versucht.Lodash debounce mit React Input

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

Antwort

7

Die Entprellfunktion kann als Klassenmethode direkt in der JSX oder eingestellt inline übergeben werden, wie hier zu sehen:

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

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

Wenn Sie mit es2015 + Sie können festlegen, Ihre Entprellmethode entweder in Ihrem constructor oder in componentWillMount.

Beispiel:

componentWillMount() { 
    this.search = _.debounce(e => { 
    console.log('Debounced Event:', e); 
    }, 1000); 
} 
+0

Vielen Dank dafür. Was ich jetzt sehe, ist ein Konsolenprotokoll des synthetischen Ereignisses und ich brauche den e.target.value, um die Suche durchzuführen. Ich habe e.persist() ausprobiert, aber es scheint nichts zu tun. Entprellen funktioniert technisch, aber ohne einen Wert zu übergeben, funktioniert es nicht. Danke für jede Hilfe. –

+0

Ich konnte das nicht genau benutzen, aber es hat mich dahin gebracht wo ich hin musste. Ich hatte im Grunde die Eingabe Anrufsuche (e) und dann dieses Ereignis an eine andere Funktion mit der Entprellung übergeben. Ich habe über event.persist() gelesen, aber ich konnte diese Arbeit nicht bekommen. Danke für Ihre Hilfe!! –

+0

Überprüfen Sie diese Antwort auch: https://Stackoverflow.com/a/28046731/551030 –

1

dass

Auf der einen Seite nicht so einfache Frage ist nur, um zu arbeiten, Fehler, den Sie bekommen, müssen Sie Sie setVariables in der Funktion einpacken:

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

Auf einer anderen Seite, Ich glaube, Entprelllogik muss in Relay eingekapselt werden.