Handling-Kontext in ES6-Klassen

Question

Ich bin in die Realms von Winkel 2 übergegangen und habe beschlossen, eine Drag-and-Drop-Komponente zu erstellen. Also:

Ich habe mehrere Variablen mit zugeordneten Typen definiert wie folgt:

export class UploadComponent { 
    image: Blob; 
    reader: FileReader; 
    ele: Element; 
    cols: NodeList; 
    dragSrcEl: Object; 

    ... 
} 

Und ich habe mehrere Funktionen an ihren entsprechenden Zuhörer - hier sind die beiden Funktionen in Frage:

handleDragStart(e) { 
    e.target.classList.remove('opaque'); 
    (() => { this.dragSrcEl = e; })(); 

    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData('text/html', this['innerHTML']); 
    } 

und

handleDrop(e) { 
    if(e.stopPropagation) 
     e.stopPropagation(); 

    console.log('this -> '+this); 
    console.log('dragSrcEl -> '+(() => { this.dragSrcEl })()); 
    } 

so, wenn der Benutzer beginnt, das Element zu ziehen Wir setzen die this.dragSrcEl Klassenvariable auf e, aber wenn ich darauf in der zweiten Funktion zugreife, bekomme ich auch undefined, wenn ich die wunderbare Pfeilfunktion verwende. Warum?

Ist die Verwendung der Pfeilfunktion hier nicht ausreichend, um sicherzustellen, dass ich auf den richtigen Kontext zugreife und auf die richtige Variable zugreife? Ich muss ein grundlegendes Missverständnis von OO Javascript haben, weil ich denke, dass das funktionieren sollte.

Dank

EDIT 1

Ich habe auch versucht, es ohne die Verwendung des IIFE wie so nennen:

this.dragSrcEl = e; 

Answer 1

Das Ziel einer Funktionsgrenze Als Ereignishandler für ein DOM-Ereignis dient der Quell-DOM-Knoten selbst.

Wenn Sie ein Objekt im Handler ändern möchten, müssen Sie es dem Handler zur Verfügung stellen.

Entweder durch Schließen, durch Binden eines Arguments oder durch Binden des Ziels.

z.B.

element.addEventListener('dragstart', onDragStart.bind(myComponent)); 

var button = document.querySelector('#my-button'); 
 
button.addEventListener('click', onClick); 
 

 
function onClick() { 
 
    console.log(this); 
 
}

<button id="my-button">Click Me</button>

Answer 2

Sie brauchen nicht ein IIFE

handleDragStart(e) { 
    e.target.classList.remove('opaque'); 
    this.dragSrcEl = e; 

    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData('text/html', this['innerHTML']); 
    } 

handleDrop(e) { 
    if(e.stopPropagation) 
     e.stopPropagation(); 

    console.log('this -> '+this); 
    console.log('dragSrcEl -> '+this.dragSrcEl); 
    } 

erstellen