Me gustaría escribir una pequeña biblioteca de JavaScript.
Es muy simple. Es un pequeño contenedor para cargar archivos.
De todos modos: tengo un problema para acceder a la instancia en el evento.
Lo intento así:
class FileUpload { constructor(element) { this.element = element; this.dropDiv = document.createElement("div"); this.dropDiv.style = "border: 2px solid #007bff; background-color: lightblue; width: 100%;border-radius: 25px;"; this.dropDiv.className = "text-center"; this.dropDiv.innerHTML = "Upload<br>File<br>Here"; this.dropDiv.addEventListener("dragover", function(event) { event.preventDefault(); }); this.dropDiv.addEventListener("drop", this.dropHandler); this.element.appendChild(this.dropDiv); } dropHandler(event) { event.preventDefault(); this.uploadFile("Test"); } uploadFile(file) { console.log("Logic to Upload the file or whatever..."); console.log(file); } }Me sale el error: this.uploadFile no es una función
Si lo intento así:
..... this.dropDiv.addEventListener("drop", this.dropHandler('Test')); this.element.appendChild(this.dropDiv); } dropHandler(testVar) { console.log(testVar); console.log(this); this.uploadFile("Test"); } uploadFile(file) { console.log("Logic to Upload the file or whatever..."); console.log(file); }Funciona. Pero mi problema: necesito el controlador de eventos.
Obtener el remitente no es un problema (this.element / this.dropDiv, ...)
Pero, ¿cómo obtengo el evento con los parámetros Y la instancia de FileUpload?
¡Gracias!
Esta costura para trabajar. En el código inicial, this en la función dropHandler() se refería al elemento drop. Cambié las dos funciones a sintaxis de flecha.
Además (y en mi humilde opinión, más emocionante) es cómo se une la nueva función de flecha, o en realidad NO se une a esto. Las funciones de flecha vinculan léxicamente su contexto, por lo que en realidad se refiere al contexto de origen. Funciones de flecha y léxico
this
Entonces, la función se vinculará al objeto, no al elemento.
class FileUpload { constructor(element) { this.element = element; this.dropDiv = document.createElement("div"); this.dropDiv.style = "border: 2px solid #007bff; background-color: lightblue; width: 100%;border-radius: 25px;"; this.dropDiv.className = "text-center"; this.dropDiv.innerHTML = "Upload<br>File<br>Here"; this.dropDiv.addEventListener("dragover", e => e.preventDefault()); this.dropDiv.addEventListener("drop", this.dropHandler); this.element.appendChild(this.dropDiv); } dropHandler = e => { e.preventDefault(); this.uploadFile("Test"); } uploadFile = file => { console.log("Logic to Upload the file or whatever..."); console.log(file); } } var f1 = new FileUpload(document.querySelector('div')); <div>test</div>