React
Reaktionsformen

Kontrollierte Komponenten

Eine kontrollierte Komponente ist an einen Wert gebunden, und ihre Änderungen werden mithilfe von ereignisbasierten Rückrufen im Code verarbeitet.

class CustomForm extends React.Component {
constructor() {
    super();
    this.state = {
        person: {
            firstName: '',
            lastName: ''
        }
    }
}

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

render() {
    return (
        <form>
            <input 
            type="text"
            name="firstName"
            value={this.state.firstName}
            onChange={this.handleChange.bind(this)} />

            <input 
            type="text"
            name="lastName"
            value={this.state.lastName}
            onChange={this.handleChange.bind(this)} />
        </form>
    )
}

}

In diesem Beispiel initialisieren wir state mit einem leeren Personenobjekt. Wir binden dann die Werte der 2 Eingänge an die einzelnen Tasten des Personenobjekts. handleChange der Benutzer den Typ handleChange , erfassen wir jeden Wert in der handleChange Funktion. Da die Werte der Komponenten festgeschrieben sind, können wir sie als die Benutzertypen durch Aufruf von setState() .

HINWEIS: Nicht Aufruf setState() , wenn sie mit gesteuerten Komponenten handeln, bewirkt , dass der Benutzer schreiben, aber nicht die Eingabe , weil Veränderungen reagieren macht nur dann , wenn es so zu tun , erzählt wird.

Es ist auch wichtig zu beachten, dass die Namen der Eingaben den Namen der Schlüssel im Personenobjekt entsprechen. Auf diese Weise können wir den Wert in Form eines Wörterbuchs wie hier dargestellt erfassen.

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

person[event.target.name] ist das gleiche wie ein person.firstName || person.lastName . Dies hängt natürlich davon ab, welche Eingabe gerade eingegeben wird. Da wir nicht wissen, wo der Benutzer tippen wird, können wir die Benutzereingabe-Nr. Verwenden, indem Sie ein Wörterbuch verwenden und die Namen der Eingaben mit den Namen der Tasten abgleichen egal woher der onChange aufgerufen wird.