Gestire eventi

Per rendere il nostro componente veramente utile, proviamo ad aggiungere un po’ di interattività. Faremo in modo che l’utente possa esprimere la sua valutazione cliccando su una delle stelle visualizzate. Per ottenere questo risultato, è sufficiente modificare il codice della funzione createStar() come mostrato di seguito:

createStar(starCode, index) {
    let span = document.createElement("span");
    span.setAttribute("class", "rating");
    span.addEventListener("click", () => {
        this.setAttribute("value", index);
    });
    span.innerHTML = starCode;
    return span;
}

Abbiamo introdotto il secondo parametro index che indica la posizione (e quindi il valore) della stella che stiamo creando. Abbiamo inoltre aggiunto un gestore d’evento alla stella generata che in corrispondenza del clic imposta il corrispondente valore sull’attributo value, innescando il meccanismo di aggiornamento che abbiamo implementato prima.

Da notare come nell’associazione del listener all’evento click abbiamo fatto ricorso ad una arrow function e non ad una classica function. Questo evita ambiguità sul significato di this, che nel nostro caso farà riferimento al Web component che stiamo implementando.

Una volta modificata la funzione createStar() dobbiamo adeguare la funzione createStarList() per fare in modo che ad ogni chiamata a createStar() venga passato un valore per index. Il seguente codice mostra la nuova versione di createStarList():

createStarList() {
    let div = document.createElement("div");
    let star;
    for (let i = 1; i <= this.maxValue; i++) {
        if (i <= this.value) {
            star = this.createStar("&#x2605;", i);
            div.appendChild(span);
        } else {
            star = this.createStar("&#x2606;", i);
        }
        div.appendChild(star);
    }
    return div;
}

A questo punto avremo il nostro componente con il comportamento reattivo che ci aspetteremmo.