Ich erstelle eine Komponente, mit der lokale Dateien auf ein div gezogen und dort abgelegt werden können. Dann gibt es eine Ausgabe von Informationen über die abgelegte Datei.

Mein Problem ist, dass ich nicht weiß, wie ich die Ereignis-Listener richtig anhängen soll.drop unddragover beim Erstellen meiner Komponente.

Meine App-Komponente ist der Ort, an dem sich meine gesamte Logik befindet (Handler für Ablegen und Ziehen), und ich habe eine separate Komponente erstellt, in der Dateien abgelegt werden - dropZone-Komponente.

Ich habe versucht, den Ereignis-Listener mit einem @ auf das dropZone-Tag meiner App-Komponente zu setzecomponentDidMount wo, wenn meine dropZone-Komponente gerendert wurde, einen Ereignis-Listener darauf setzen:

componentDidMount(){
      const dropZone = document.getElementById('dropZone');
      dropZone.addEventListener('dragover', this.allowDrop.bind(this))
      dropZone.addEventListener('drop', this.dropHandler.bind(this))
    } 

dies hat nicht funktioniert

Ich habe dann versucht, es in mein dropZone-Tag zu setzen, das sich auf meiner App-Komponente befindet:

<DropZone dropZone = {"dropZone"} onDragOver = {this.allowDrop.bind(this)} 
 onDrop ={this.dropHandler.bind(this)} >      
</DropZone>

this hat dropZone auch keinen Ereignis-Listener hinzugefügt. Ich habe ein paar andere Dinge ausprobiert, aber das sind die, an denen ich hätte arbeiten sollen.

Also meine Fragen sind,

wie füge ich das @ hindrop unddragover Event-Listener auf dropZone?

Soll ich diese Ereignis-Listener zur App hinzufügen und sie als Requisite an die dropZone-Komponente übergeben? Oder ist gar keine Weitergabe nötig

Oder sollte ich die Ereignis-Listener direkt in dropZone hinzufügen, damit meine Ereignis-Handler-Funktionen in der dropZone-Komponente ausgeführt werden?