Reagieren/ES6: Arrow Funktion nicht "das" wie erwartet

Question

Sprache Bindung: Reagieren/JavaScript ES6

Bündelung Tool: Webpack (babel-loader 6.0.0)

Andere Libs Beteiligte: Prospekt

Problem:

Mit der Funktion unter dem Kontext this auf die Komponente gebunden, wie ich brauche.

Bevor:

componentDidMount: function() { 

    map.on('draw:created', function(e){ 
     this.setState({someProp:propUpdate}); 
     featureGroup.addLayer(e.layer); 
    }.bind(this)); 

    } 

Aber wenn ich es mit dem Pfeil-Funktion umgeschaltet erwartete ich eine äquivalente Bindung, sondern this auf einem Beiblatt Klasse geändert o.Class.extend.e-this.setState undefiniert bleibt.

Nach:

componentDidMount: function() { 

    map.on('draw:created', (e) => { 
     this.setState({someProp:propUpdate}); 
     featureGroup.addLayer(e.layer); 
    }); 

} 

Frage: Warum ist die Pfeil-Funktion nicht das Äquivalent von mit this in meinem Fall verbindlich?

Answer 1

einige Änderungen vorgenommen:
Funktionen Pfeil Sie die this Schlüsselwort nicht binden. So arbeiten sie. Wenn Sie das Schlüsselwort this verwenden müssen, müssen Sie die Funktion bind verwenden. Auch Bindung mit Pfeilfunktion kann seltsam sein.

componentDidMount: function() { 
    var thisKey = this; 
    map.on('draw:created', (e) => { 
     this.setState({someProp:propUpdate}); 
     featureGroup.addLayer(e.layer); 
    }.bind(thisKey)); 

}