Arbeiten mit Formen in React

Die Handhabung der Benutzereingabe ist für fast jede Anwendung von grundlegender Bedeutung. In der Welt der Webentwicklung sind HTML -Formulare das Standard -Tool für diese Aufgabe. Wenn Sie neu im Reagieren sind, scheint es entmutigend, Formen zu integrieren. Dieser Artikel bietet einen klaren und präzisen Leitfaden für die Arbeit mit Formularen in React und deckt sowohl grundlegende als auch fortschrittliche Techniken ab.

Schlüsselkonzepte

• Unkontrollierte Eingänge: Dies sind der einfachste Ansatz. React verfolgt nicht den Zustand der Eingabe. Stattdessen greifen Sie während der Einreichung direkt auf die Werte aus den DOM -Elementen zu. Dies ist für sehr einfache Formen geeignet.
• kontrollierte Eingänge: reags verwaltet den Zustand des Eingangs. Dies bietet eine überlegene Kontrolle, die Echtzeit-Validierung, Formatierung, bedingte Renderung und dynamische Eingabeerzeugung ermöglicht. Dies ist der empfohlene Ansatz für die meisten Szenarien.
• Echtzeit-Validierung: kontrollierte Komponenten ermöglichen sofortige Rückmeldungen zur Eingabetypität als Benutzertyp, wodurch die Benutzererfahrung verbessert wird.
• Bibliotheken von Drittanbietern: Bibliotheken wie Fresh Simplify Form Management, insbesondere für komplexe Formulare, Reduktion des Boilerplate-Codes.

Unkontrollierte Eingaben: Ein grundlegender Ansatz

unkontrollierte Eingänge nutzen Refs, um auf den zugrunde liegenden DOM -Knoten zuzugreifen. So sieht es in einer funktionalen Komponente aus:

<code class="language-javascript">function SimpleForm() {
  const nameEl = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
    <form onsubmit="{handleSubmit}">
      <label htmlfor="name">Name:</label>
      <input type="text" ref="{nameEl}" id="name">
      <button type="submit">Submit</button>
    </form>
  );
}</code>

Für Klassenkomponenten wird React.createRef() im Konstruktor verwendet. Während unkomplizierte unkontrollierte Eingänge die Merkmale ihrer kontrollierten Gegenstücke fehlen.

Beispiel: Anmeldeformular (unkontrolliert)

<code class="language-javascript">function LoginForm() {
  // ... (refs for username, password, rememberMe) ...

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      username: nameEl.current.value,
      password: passwordEl.current.value,
      rememberMe: rememberMeEl.current.checked,
    };
    // ... (submit data) ...
  };

  return (
    <form onsubmit="{handleSubmit}">
      {/* ... (input fields) ... */}
    </form>
  );
}</code>

Die Einschränkungen unkontrollierter Eingaben werden bei der Echtzeit-Validierung oder des dynamischen Formverhaltens erkennbar.

kontrollierte Eingänge: Verbesserte Steuerung

kontrollierte Eingänge halten den Zustand innerhalb der React -Komponente bei. Änderungen an der Eingabe aktualisieren den Status und Statusänderungen Aktualisieren Sie die Eingabe.

<code class="language-javascript">class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
  }

  handleInput = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <input type="text" value="{this.state.name}" onchange="{this.handleInput}">
    );
  }
}</code>

Dieser kreisförmige Datenfluss bietet die implementierende Leistung:

• Echtzeit-Validierung: Sofortiges Feedback zur Eingabekorrektheit geben.
• Eingabebildformatierung: Formatierung (z. B. Währung, Telefonnummern) dynamisch.
• Bedingte Rendering: Elemente anhand der Eingabewerte anzeigen/ausblenden.
• Dynamische Eingabeerzeugung: Eingänge basierend auf Benutzerinteraktionen hinzufügen.

Validierung: Echtzeit-Feedback

kontrollierte Eingänge ermöglichen eine kontinuierliche Validierung. Hier ist ein vereinfachtes Beispiel für die Validierung von Kreditkarten (unter Verwendung einer hypothetischen validateCreditCard -Funktion):

<code class="language-javascript">function CreditCardForm() {
  // ... (state for card number and error message) ...

  const handleCardNumber = (e) => {
    const value = e.target.value;
    const isValid = validateCreditCard(value); // Hypothetical validation function
    this.setState({ cardNumber: value, cardError: !isValid });
  };

  return (
    <form>
      <input type="text" value="{this.state.cardNumber}" onchange="{this.handleCardNumber}">
      {this.state.cardError && <span>Invalid credit card number</span>}
    </form>
  );
}</code>

Formularbibliotheken: Strophenentwicklung

Bibliotheken wie Frisch reduzieren die Kesselplatte erheblich. Hier ist ein einfaches Beispiel:

<code class="language-javascript">function SimpleForm() {
  const nameEl = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
    <form onsubmit="{handleSubmit}">
      <label htmlfor="name">Name:</label>
      <input type="text" ref="{nameEl}" id="name">
      <button type="submit">Submit</button>
    </form>
  );
}</code>

Diese Bibliotheken verwalten das staatliche Management, die Validierung und die Einreichung und machen die Entwicklung effizienter.

Schlussfolgerung

Verständnis von kontrollierten und unkontrollierten Eingaben ist für die effektive Form des Formulars bei React von entscheidender Bedeutung. Während unkontrollierte Eingänge für einfache Szenarien geeignet sind, bieten kontrollierte Eingänge die Flexibilität und Leistung, die für die meisten Anwendungen benötigt wird. Erwägen Sie, Formularbibliotheken zu verwenden, um die Entwicklung für komplexe Formen zu optimieren. Denken Sie daran, die Benutzererfahrung durch eindeutiges Feedback und Fehlerbehandlung zu priorisieren.

Das obige ist der detaillierte Inhalt vonArbeiten mit Formen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!