forms.md

name	permalink
Eingabemasken	/guide/forms

Eingabemasken

Eingabemasken funktionieren in Preact fast genauso wie in React, allerdings gibt es keine Unterstützung für "statische" (Ausgangswert) props/Attribute.

React Eingabemasken-Doku

Kontrollierte & Unkontrollierte Komponenten

Reacts Dokumentation zu "Kontrollierten" Komponenten und "Unkontrollierten" Komponenten ist ungemein nützlich, wenn man verstehen möchte, wie man HTML-Eingabemasken mit bidirektionalem Datenfluss benutzt und sich diese im Kontext eines komponentenbasierten DOM-Renderer, welche normalerweise unidirektionale Datenflüsse haben, zu Nutze macht.

Generell sollte man versuchen, immer Kontrollierte Komponenten zu verwenden. Trotzdem kann es beim Erstellen von unabhängigen Komponenten oder umschließenden Drittanbieter-UI-Bibliotheken sehr nützlich sein, die Komponente einfach als Mount-Punkt für Non-Preact-Funktionalitäten zu verwenden. In diesen Fällen sind Unkontrollierte Komponenten genau richtig für die Aufgabe.

Kontrollbox & Radio Buttons

Kontrollboxen und Radio Buttons (<input type="checkbox|radio">) können anfänglich für Verwirrung sorgen, wenn man kontrollierte Eingabemasken erstellt. Das liegt daran, dass man in einer unkontrollieren Umgebung normalerweise dem Browser erlauben würden, eine Kontrollbox oder einen Radio Button für uns "umzuschalten" oder "anzukreuzen", auf Änderungsereignisse zu warten und auf den neuen Wert zu reagieren. Allerdings funktioniert diese Technik nicht sonderlich gut in einem Szenario, in dem das UI immer wieder automatisch als Reaktion auf state- und prop-Änderungen aktualisiert wird.

Durchlauf: Nehmen wir an, dass wir auf ein "Änderungs"ereignis einer Kontrollbox warten, welches ausgelöst wird, wenn die Kontrollbox ausgewählt oder aufgehoben wird. Der Änderungsereignis-Handler wird ein Wert in state dem neuen Wert, der von der Kontrollbox empfangen wird, zugeordnet. Dies löst das Neurendern der Komponente aus, was den Wert der Kontrollbox dem Wert von state neu zuordnen wird. Das ist allerdings unnötig, da wir gerade beim DOM einen Wert angefragt haben, ihm dann aber das Neurendern mit dem gewünschten Wert befohlen haben.

Man sollte also anstatt auf ein change-Ereignis auf ein click-Ereignis warten, welches bei jedem Click des Nutzers auf die Kontrollbox oder ein assoziiertes <label> ausgelöst wird. Kontrollboxen schalten lediglich zwischen Boolean true und false hin und her, daher bewirkt ein Klick auf die Kontrollbox oder das Label nichts anderes als eine Invertierung des aktuellen Stadiums, das Auslösen einer Neurenderung und das Setzen des gewünschten Wertes innerhalb der Kontrollbox.

Kontrollboxbeispiel

class MeineEingabemaske extends Component {
    toggle = e => {
        let checked = !this.state.checked;
        this.setState({ checked });
    };
    render({ }, { checked }) {
        return (
            <label>
                <input
                    type="checkbox"
                    checked={checked}
                    onClick={this.toggle} />
            </label>
        );
    }
}