Wie werden Pfeilfunktionen (öffentliche Klassenfelder) als Klassenmethoden verwendet?

Question

Ich bin neu bei der Verwendung von ES6-Klassen mit React, zuvor habe ich meine Methoden an das aktuelle Objekt gebunden (siehe erstes Beispiel), aber erlaubt es ES6, eine Klassenfunktion dauerhaft an eine Klasseninstanz mit Pfeilen zu binden? (Nützlich, wenn man vorbei als Callback-Funktion.) Bekomme ich Fehler, wenn ich versuche sich, wie Sie mit Coffeescript nutzen können:

class SomeClass extends React.Component { 

    // Instead of this 
    constructor(){ 
    this.handleInputChange = this.handleInputChange.bind(this) 
    } 

    // Can I somehow do this? Am i just getting the syntax wrong? 
    handleInputChange (val) => { 
    console.log('selectionMade: ', val); 
    } 

Also, wenn ich bin SomeClass.handleInputChange passieren, zum Beispiel setTimeout, wäre es scoped werden zu der Klasseninstanz und nicht das Objekt window.

Answer 1

Ihre Syntax ist etwas aus, nur ein Gleichheitszeichen nach dem Eigenschaftsnamen fehlt.

class SomeClass extends React.Component { 
    handleInputChange = (val) => { 
    console.log('selectionMade: ', val); 
    } 
} 

Dies ist eine experimentelle Funktion. Sie müssen experimentelle Funktionen in Babel aktivieren, damit diese kompiliert werden können. Here ist eine Demo mit experimentellem aktiviert.

Um experimentelle Funktionen in babel zu verwenden, können Sie das entsprechende Plugin von here installieren. Für diese spezielle Funktion, müssen Sie die transform-class-properties plugin:

{ 
    "plugins": [ 
    "transform-class-properties" 
    ] 
} 

Sie können mehr über den Vorschlag für Klassenfelder und statischen Eigenschaften lesen here

---

Answer 2

Nein, wenn Sie gebunden erstellen möchten, instanzspezifische Methoden müssen Sie das im Konstruktor tun. Sie können jedoch Pfeil Funktionen für die Verwendung anstelle von .bind an einem Prototyp-Methode:

class SomeClass extends React.Component { 
    constructor() { 
    super(); 
    this.handleInputChange = (val) => { 
     console.log('selectionMade: ', val, this); 
    }; 
    … 
    } 
} 

Es ein proposal ist, die Ihnen die constructor() und direkt die Zuordnung im Klassenbereich mit der gleichen setzen weglassen könnte erlauben Funktionalität, aber ich würde nicht empfehlen, das zu verwenden, da es sehr experimentell ist.

Alternativ können Sie immer .bind verwenden, mit dem Sie die Methode für den Prototyp deklarieren und dann an die Instanz im Konstruktor binden können. Dieser Ansatz bietet eine größere Flexibilität, da die Methode von außerhalb der Klasse geändert werden kann.

class SomeClass extends React.Component { 
    constructor() { 
    super(); 
    this.handleInputChange = this.handleInputChange.bind(this); 
    … 
    } 
    handleInputChange(val) { 
    console.log('selectionMade: ', val, this); 
    } 
} 

Answer 3

Die Frage ist ganz bereit, beantwortet aber ich werde hier einige Anwendungsfälle hinzufügen ES6 verwenden Methode Pfeil.

Innerhalb Callback-Methoden:

let arr = [1,2]; 
let arr1 = arr.map((val,index) => { 
    return val * 2; 
}); 

oder

let arr1 = arr.map(val => { // if one argument then no need of using() 
    return val * 2; 
}); 

Hinweis: innerhalb Callback-Funktion, wenn this dann hier verwendet wird this siehe Funktion anstelle von Komponentenklasse zurückrufen.

Ex:

arr.map(function(val) { 
    this.func(val); // Will not work 
}); 

arr.map((val,index)=>{ 
    this.func(); // Will work 
}); 

Answer 4

weiß, dass ich diese Frage ausreichend beantwortet wurde, aber ich habe nur einen kleinen Beitrag (für diejenigen, die nicht wollen, die experimentelle Funktion verwenden) zu machen. Wegen des Problems, mehrere function binds im Konstruktor zu binden und es chaotisch aussehen zu lassen, habe ich eine Utility-Methode entwickelt, die im Konstruktor gebunden und aufgerufen wird und automatisch alle notwendigen Methodenbindungen für Sie ausführt.

Angenommen ich diese Klasse mit dem Konstruktor:

//src/components/PetEditor.jsx 
 
import React from 'react'; 
 
class PetEditor extends React.Component { 
 
    
 
    constructor(props){ 
 
     super(props); 
 
     this.state = props.currentPet || {tags:[], photoUrls: []}; 
 
     
 
     this.tagInput = null; 
 
     this.htmlNode = null; 
 

 
     this.removeTag = this.removeTag.bind(this); 
 
     this.handleChange = this.handleChange.bind(this); 
 
     this.modifyState = this.modifyState.bind(this); 
 
     this.handleKeyUp = this.handleKeyUp.bind(this); 
 
     this.addTag = this.addTag.bind(this); 
 
     this.removeTag = this.removeTag.bind(this); 
 
     this.savePet = this.savePet.bind(this); 
 
     this.addPhotoInput = this.addPhotoInput.bind(this); 
 
     this.handleSelect = this.handleSelect.bind(this); 
 
     
 
    } 
 
    
 
    ...//actual method declarations omitted 
 
    
 
}

Es sieht chaotisch, nicht wahr? Jetzt habe ich diese Hilfsmethode

//src/utils/index.js 
 
/** 
 
* NB: to use this method, you need to bind it to the object instance calling it 
 
*/ 
 
export function bindMethodsToSelf(objClass, otherMethodsToIgnore=[]){ 
 
    const self = this; 
 
    Object.getOwnPropertyNames(objClass.prototype) 
 
     .forEach(method => { 
 
       //skip constructor, render and any overrides of lifecycle methods 
 
       if(method.startsWith('component') 
 
       || method==='constructor' 
 
       || method==='render') return; 
 
       //any other methods you don't want bound to self 
 
       if(otherMethodsToIgnore.indexOf(method)>-1) return; 
 
       //bind all other methods to class instance 
 
       self[method] = self[method].bind(self); 
 
     }); 
 
}

Alles, was ich jetzt tun müssen, ist, dass Dienstprogramm zu importieren, und um einen Anruf zu meinem Konstruktor hinzufügen, und ich brauche nicht jede neue Methode zu binden im Konstruktor nicht mehr. New Konstruktor sieht jetzt sauber, wie folgt aus:

//src/components/PetEditor.jsx 
 
import React from 'react'; 
 
import { bindMethodsToSelf } from '../utils'; 
 
class PetEditor extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.state = props.currentPet || {tags:[], photoUrls: []}; 
 
     this.tagInput = null; 
 
     this.htmlNode = null; 
 
     bindMethodsToSelf.bind(this)(PetEditor); 
 
    } 
 
    ... 
 
}