React.js und Entprellung onChange Ereignis funktioniert nicht

Question

ich reagieren Komponente auf Änderungsereignis umgesetzt haben, wie folgt aus:

NewItem = React.createClass({ 

    componentWillMount: function() { 
    this._searchBoxHandler = debounce(this._searchBoxHandler, 500); 
    }, 

    _searchBoxHandler: function(event) { 
    this.context.flux.getActions('order').setOrders(...); 
    }, 

    render: function() { 
    ... 
    var _self = this; 
    return (<TextField onChange={_self._searchBoxHandler} />)  
    }) 

}); 

Ich habe diese UMSETZUNG getan, indem diese Antwort Prüfung (Good idea Abschnitt): https://stackoverflow.com/a/28046731/842622

Aber es funktioniert nicht. Ich habe immer 'Eigenschaft' Wert 'von Null' vom Ereignisobjekt nicht lesen können.

Fehle ich hier etwas?

Answer 1

Sie benötigen Kontext zu binden oder einen Verschluss verwenden zu halten Scoping:

NewItem = React.createClass({ 
 

 
    componentWillMount: function() { 
 
    this._searchBoxHandler = debounce(this._searchBoxHandler.bind(this), 500); 
 
    }, 
 

 
    _searchBoxHandler: function(event) { 
 
    this.context.flux.getActions('order').setOrders(...); 
 
    }, 
 

 
    render: function() { 
 
    ... 
 
    var _self = this; 
 
    return (<TextField onChange={_self._searchBoxHandler} />)  
 
    }) 
 

 
});

Ein häufiger Fehler für neuen JavaScript-Programmierer ist es, eine Methode von einem Objekt zu extrahieren, dann um später diese Funktion aufzurufen und zu erwarten, dass sie das ursprüngliche Objekt als ihr verwendet (zB indem diese Methode in Callback-basiertem Code verwendet wird). Ohne besondere Sorgfalt ist das ursprüngliche Objekt jedoch normalerweise verloren. Erstellen eine gebundene Funktion von der Funktion, das ursprüngliche Objekt verwenden, ordentlich löst dieses Problem .. - MDN

einige netten docs auf der Bindung und Kontext: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

oder man könnte einen ‚Fett-Pfeil verwenden 'Funktion für den Zugriff auf übergeordnete Klasse -umfang:

debounce((event) => { this._searchBoxHandler(event); }, 500);

Hinweis: ich würde die deklarierte Funktion Eigenschaft im componentWillMount inv nicht überschreiben Stattdessen könnten Sie die entprellte Instanz in einer anderen Eigenschaft wie _debouncedSearchBoxHandler speichern