React
Formulare und Benutzereingaben

Kontrollierte Komponenten

Kontrollierte Formularkomponenten werden mit einer value definiert. Der Wert der kontrollierten Eingaben wird von React verwaltet. Benutzereingaben haben keinen direkten Einfluss auf die gerenderten Eingaben. Eine Änderung der value Eigenschaft muss stattdessen diese Änderung widerspiegeln.

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: ''
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          value={this.state.name} />
      </div>
    )
  }
}

Das obige Beispiel zeigt, wie die value Eigenschaft den aktuellen Wert der Eingabe definiert und der onChange Ereignishandler den onChange der Komponente mit der Benutzereingabe aktualisiert.

Formulareingaben sollten nach Möglichkeit als kontrollierte Komponenten definiert werden. Dadurch wird sichergestellt, dass der Komponentenstatus und der Eingabewert jederzeit synchron sind, auch wenn der Wert durch einen anderen Trigger als eine Benutzereingabe geändert wird.

Unkontrollierte Komponenten

Unkontrollierte Komponenten - Eingänge, die keinen haben value Eigenschaft. Im Gegensatz zu kontrollierten Komponenten ist es die Aufgabe der Anwendung, den Komponentenstatus und den Eingangswert synchron zu halten.

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: 'John'
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          defaultValue={this.state.name} />
      </div>
    )
  }
}

Hier wird der Status der Komponente ebenso wie bei kontrollierten Komponenten über den onChange Ereignishandler aktualisiert. Anstelle einer value Eigenschaft wird jedoch eine defaultValue Eigenschaft angegeben. Dies bestimmt den Anfangswert der Eingabe während des ersten Renderns. Nachfolgende Änderungen des Zustands der Komponente werden vom Eingabewert nicht automatisch übernommen. Wenn dies erforderlich ist, sollte stattdessen eine kontrollierte Komponente verwendet werden.