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.