[Javascript] Wie benutze ich Pfeilfunktionen (öffentliche Klassenfelder) als Klassenmethoden?


Answers

Nein, wenn Sie gebundene, instanzspezifische Methoden erstellen möchten, müssen Sie dies im Konstruktor tun. Sie können jedoch .bind , anstatt .bind auf einer Prototypmethode zu verwenden:

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

Es gibt einen Vorschlag, der es Ihnen erlaubt, den constructor() wegzulassen und die Zuweisung direkt in den Klassenbereich mit der gleichen Funktionalität zu setzen, aber ich würde nicht empfehlen, diesen zu verwenden, da er sehr experimentell ist.

Alternativ können Sie immer .bind , um die Methode im Prototyp zu deklarieren und dann an die Instanz im Konstruktor zu binden. Dieser Ansatz ist flexibler, da er die Methode von außerhalb der Klasse ändern kann.

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

Ich bin neu bei der Verwendung von ES6-Klassen mit React, zuvor habe ich meine Methoden an das aktuelle Objekt gebunden (show im ersten Beispiel), aber erlaubt mir ES6, eine Klassenfunktion dauerhaft an eine Klasseninstanz mit Pfeilen zu binden? (Hilfreich bei der Übergabe als Callback-Funktion.) Ich bekomme Fehler, wenn ich versuche, sie wie bei CoffeeScript zu verwenden:

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);
  }

Wenn ich also SomeClass.handleInputChange an setTimeout , würde dies auf die Klasseninstanz und nicht auf das window Objekt beschränkt sein.




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

Innenrückrufmethoden:

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 der Callback-Funktion bezieht sich this hier auf die Callback-Funktion anstelle der Component-Klasse.

Ex:

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

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