Oberstufe: Formulare in React verwalten

Die Verwaltung von Formularen in React kann komplex werden, insbesondere wenn es um fortgeschrittene Szenarien wie mehrstufige Formulare, Datei-Uploads und komplizierte Validierungslogik geht. Dieser Leitfaden bietet einen detaillierten Einblick in kontrollierte und unkontrollierte Komponenten, Formularvalidierung und die Verwaltung komplexer Formulare und hilft Ihnen dabei, eine robuste und wartbare Formularverarbeitung in Ihren React-Anwendungen zu erstellen.

Kontrollierte Komponenten

Kontrollierte Komponenten in React sind Komponenten, bei denen Formulardaten durch den Status der Komponente verwaltet werden. Dieser Ansatz stellt sicher, dass React die volle Kontrolle über die Formulareingaben hat, wodurch das Formularverhalten vorhersehbarer und einfacher zu verwalten ist.

Umgang mit Formulardaten mit Status

Um eine kontrollierte Komponente zu erstellen, initialisieren Sie den Status für die Formulardaten und aktualisieren Sie den Status basierend auf Benutzereingaben.

Beispiel:

import React, { useState } from 'react';

const ControlledForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

In diesem Beispiel verwaltet useState die Formulardaten und die handleChange-Funktion aktualisiert den Status, wann immer der Benutzer in die Eingabefelder tippt.

Unkontrollierte Komponenten

Unkontrollierte Komponenten verlassen sich bei der Verarbeitung von Formulardaten auf das DOM. Sie verwenden Refs, um direkt aus den DOM-Elementen auf die Formulardaten zuzugreifen.

Verwenden von Refs für den Zugriff auf Formulardaten

Um eine unkontrollierte Komponente zu erstellen, verwenden Sie den useRef-Hook, um Refs für die Formularelemente zu erstellen.

Beispiel:

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${nameRef.current.value}, Email: ${emailRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" ref={emailRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

In diesem Beispiel werden die Referenzen „nameRef“ und „emailRef“ verwendet, um beim Absenden des Formulars direkt aus den DOM-Elementen auf die Eingabewerte zuzugreifen.

Formularvalidierung

Die Formularvalidierung stellt sicher, dass die Benutzereingabe vor der Übermittlung die erforderlichen Kriterien erfüllt. Eine ordnungsgemäße Validierung verbessert die Benutzererfahrung und verhindert die Verarbeitung fehlerhafter Daten.

Grundlegende Validierungstechniken

Die grundlegende Validierung umfasst die Überprüfung der Eingabewerte im Submit-Handler des Formulars und die Anzeige entsprechender Fehlermeldungen.

Beispiel:

import React, { useState } from 'react';

const BasicValidationForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.email) newErrors.email = 'Email is required';
    return newErrors;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const newErrors = validate();
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      alert(`Name: ${formData.name}, Email: ${formData.email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default BasicValidationForm;

In diesem Beispiel prüft die Validierungsfunktion, ob die Felder „Name“ und „E-Mail“ leer sind, und setzt entsprechende Fehlermeldungen.

Bibliotheken von Drittanbietern zur Formularvalidierung

Die Verwendung von Bibliotheken von Drittanbietern wie Formik und Yup kann die Formularvalidierung vereinfachen und wartbarer machen.

Beispiel mit Formik und Yup:

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

const FormikForm = () => (
  <div>
    <h1>Signup Form</h1>
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {() => (
        <Form>
          <label>
            Name:
            <Field name="name" />
            <ErrorMessage name="name" component="div" />
          </label>
          <br />
          <label>
            Email:
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </label>
          <br />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

export default FormikForm;

In diesem Beispiel kümmern sich Formik und Yup um den Formularstatus und die Validierung. Formik bietet eine flexible Möglichkeit zur Formularverwaltung, während Yup bei der Definition von Validierungsschemata hilft.

Komplexes Formularmanagement

Verwalten mehrstufiger Formulare

Mehrstufige Formulare umfassen die Verwaltung von Status und Navigation über mehrere Schritte hinweg, wodurch der Formularausfüllprozess oft einfacher und benutzerfreundlicher wird.

Beispiel:

import React, { useState } from 'react';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: '',
  });

  const nextStep = () => setStep(step + 1);
  const prevStep = () => setStep(step - 1);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(JSON.stringify(formData, null, 2));
  };

  switch (step) {
    case 1:
      return (
        <form>
          <h2>Step 1</h2>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 2:
      return (
        <form>
          <h2>Step 2</h2>
          <label>
            Email:
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 3:
      return (
        <form onSubmit={handleSubmit}>
          <h2>Step 3</h2>
          <label>
            Address:
            <input
              type="text"
              name="address"
              value={formData.address}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="submit">Submit</button>
        </form>
      );
    default:
      return null;
  }
};

export default MultiStepForm;

In diesem Beispiel wird der Formularstatus über mehrere Schritte hinweg verwaltet. Der nextStep und `prevStep

`-Funktionen übernehmen die Navigation zwischen Schritten.

Umgang mit Datei-Uploads in Formularen

Die Handhabung von Datei-Uploads umfasst die Verwendung eines Dateieingabeelements und die Verwaltung der hochgeladenen Datei im Komponentenstatus.

Beispiel:

import React, { useState } from 'react';

const FileUploadForm = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (file) {
      alert(`File name: ${file.name}`);
    } else {
      alert('No file selected');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Upload file:
        <input type="file" onChange={handleFileChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FileUploadForm;

In diesem Beispiel aktualisiert die Funktion handleFileChange den Status mit der ausgewählten Datei und die Funktion handleSubmit übernimmt die Formularübermittlung.

Abschluss

Das Verwalten von Formularen in React umfasst das Verstehen und Implementieren kontrollierter und unkontrollierter Komponenten, das Durchführen einer Formularvalidierung und den Umgang mit komplexen Formularen wie mehrstufigen Formularen und Datei-Uploads. Wenn Sie diese Konzepte beherrschen, können Sie robuste, wartbare und benutzerfreundliche Formulare in Ihren React-Anwendungen erstellen. Als leitender Entwickler steigert Ihre Fähigkeit, Formulare effektiv zu verwalten, Ihre Produktivität und trägt zur Gesamtqualität Ihrer Anwendungen bei.

Das obige ist der detaillierte Inhalt vonOberstufe: Formulare in React verwalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!