Tengo una clase "Hijo" que lo que hace simplemente es crear un botón como propiedad global, nada más instanciarse.
Como parámetro, en su constructor recibirá una función que estará dentro de otra clase llamada "Padre". Esta función se la pasaremos a un método de "Hijo" que también ejecutamos en su constructor. Lo que hace este método es añadirle al botón que ha creado un eventListener de tipo "click" que ejecutará esta función recibida del "Padre" pasándole como parámetro el id que tiene "Hijo".
Os paso el código de "Hijo".
export default class Hijo {
constructor(fn) {
this.id = 1;
this.btn = document.createElement('button');
this.createBtn(fn);
}
createBtn(fn) {
this.btn.innerHTML = 'Clic';
this.btn.onclick = () => fn(this.id);
document.body.append(this.btn);
}
}
En "Padre" Tenemos un método llamado borrar(id)
que recibirá un id. (El de "Hijo").
En el constructor()
lo que hacemos es crear una instancia nueva de Hijo pasándole el método borrar()
que se activará cuando hagamos click al botón que ha creado la instancia.
Paso el código de "Padre"
import Hijo from './Hijo';
export default class Padre {
constructor() {
this.mensaje = 'hola!';
const hijo = new Hijo(this.borrar);
}
// Este método se ejecuta desde Hijo al hacer clic al botón, el id se imprime bien, pero luego hemos perdido la referencia a Padre y this es undefined
borrar(id) {
alert(id);
alert(this);
alert(this.mensaje);
}
}
Cuando hago click al botón se muestra el id del botón al que he clicado, eso funciona.
Pero luego ya no sigo teniendo la referencia this
del "Padre".
¿Cómo hago para seguir guardando la referencia a la clase "Padre"?
Todo esto es un ejemplo muy sencillo de la situación real que necesito. Al final simplemente es la típica App de Tareas en la que cada tarea es una instancia de una clase "ToDo" y que ella misma se encarga de crear el markup de cada tarea, incluidos los botones de borrar, editar, etc. Al hacer click al botón de borrar, debería pasarle al padre la referencia del id de la tarea a borrar y luego el método borrarTarea()
que está en el "Padre" se encargará de borrar esa tarea en concreto. Como veis, recibo bien el id del padre pero luego no puedo llamar a ninguna otra propiedad ni método de la clase "Padre" porque ya no tengo el contexto correcto.
Dejo un link a stackblitz para el que lo quiera probar.