Das Buchungsformular

Die Platzwahl hat jetzt ihr Formular unter der Zusammenfassung: die Felder Name und E-Mail und den Button Buchen, in JSX umgewandelt (wo aus for htmlFor und aus novalidate noValidate geworden ist). Erwecke es zum Leben wie in der Lektion Formulare: Die Felder sind kontrolliert, mit den States name und email, und das Formular ruft absenden auf, das mit event.preventDefault() beginnt.

Prüfen. Dann prüft absenden das Formular, eins nach dem anderen, wie in der Übung Fehlermeldungen: einen leeren Namen, eine E-Mail ohne @, keinen ausgewählten Platz. Das erste Problem kommt in den State fehler, den das Formular zeigt, und return beendet den Handler, sodass nichts gebucht wird. Der Besucher behebt das Problem und klickt noch einmal auf Buchen. Die alte Seite zeigte alle drei Meldungen auf einmal. So gibt es eine einzige Meldung unter dem Button, und der Code ist kürzer.

Buchen. Wenn alles stimmt, macht die Platzwahl ein Ticket: ein Objekt mit einer id aus Date.now(), der Vorstellung, den Plätzen, dem Namen und der E-Mail. Aber wohin damit? Die Tickets braucht die Platzwahl, um die gebuchten Plätze als belegt zu zeigen, und die Liste Deine Tickets in Programm. Also sind sie State von Programm, tickets, und die Platzwahl bekommt sie in ihren Props, zusammen mit einer Funktion, die eins hinzufügt, wie das Formular für eigene Wörter im Abschlussprojekt des React-Kurses:

beiBuchung({
    id: Date.now(),
    vorstellung: vorstellung,
    plaetze: ausgewaehlt,
    name: name.trim(),
    email: email.trim(),
});

Ein Ticket behält die ganze Vorstellung, damit die Liste ihren Tag, ihre Uhrzeit und ihren Film zeigen kann. Dann leert die Platzwahl ausgewaehlt und beide Felder. Die gebuchten Plätze sind von nun an belegt: istBelegt() prüft mit some() auch, ob eines der Tickets für diese Vorstellung den Platz hat, wie es das alte Skript getan hat:

return tickets.some(
    (ticket) =>
        ticket.vorstellung.id === vorstellung.id && ticket.plaetze.includes(platz),
);

Schließlich sagt die Platzwahl, welche Plätze gebucht wurden, Gebucht! Deine Plätze: A3, A4, in einem weiteren State, bestaetigung. Ihr Text kann auch nach setAusgewaehlt([]) noch aus ausgewaehlt kommen: Wie du aus der Lektion State weißt, kommt der neue Wert erst mit dem nächsten Rendern.