Verwendung des onSubmit-Ereignishandlers in React Formularen

In React verwendet man die integrierte Funktion onSubmit um Formulare zu handhaben. Der onSubmit-Handler reagiert auf das "Submit"-Ereignis, das ausgelöst wird, wenn der Benutzer auf eine "Senden"-Taste klickt oder Enter drückt, während sich der Fokus in einem Formularfeld befindet.

Reagieren auf Formulareingaben

Ein Basisszenario der Formularverarbeitung in React besteht darin, einen onSubmit-Handler an das Formularelement anzuhängen:

class MyForm extends React.Component {
  handleSubmit(event) {
    event.preventDefault(); // Verhindert die sofortige Übermittlung des Formulars
    // Ihre Logik zur Behandlung der Formulardaten
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <button type="submit">Senden</button>
      </form>
    );
  }
}

In obigem Beispiele verhindert event.preventDefault() die normale Aktion des Formulars, nämlich eine GET- oder POST-Anforderung an den im Formularattribut action angegebenen URL. Stattdessen bleibt man auf der aktuellen Seite und die Daten werden entsprechend der Funktion handleSubmit verarbeitet.

Speichern des Formularzustandes

Die Formulardaten selbst werden am besten in die Zustände (State) der Komponente gespeichert. Dies ermöglicht die sofortige Aktualisierung der Benutzeroberfläche und reagiert auf Benutzereingaben in "Echtzeit". Hier ist ein einfaches Beispiel, wie das funktionieren könnte:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Ein Name wurde übermittelt: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Übermitteln" />
      </form>
    );
  }
}

In obigem Code wird jeder Tastenanschlag des Benutzers sofort zur Aktualisierung des Komponentenzustands und damit zur Aktualisierung der Anzeige verwendet.

Best Practices

Bei größeren Formularen oder bei der Handhabung von komplexeren Datenstrukturen kann die Verwendung von Bibliotheken, wie Formik oder Redux Form, helfen, den Code sauber und überschaubar zu halten.

Es ist außerdem wichtig zu beachten, dass, obwohl React das direkte Senden von Formulardaten an einen Server nicht ermöglicht, es möglich ist, die gesammelten Daten dann mithilfe von Funktionen wie fetch oder Bibliotheken wie axios an einen Server zu senden.

Zusammengefasst ist der onSubmit-Ereignishandler die richtige Wahl zur Behandlung von Formularübermittlungen in React, da er ein intuitives und leistungsstarkes Werkzeug für das Sammeln und Verarbeiten von Benutzereingaben ist.