Junior-Level: Formulare in React verwalten

Die Verwaltung von Formularen ist ein grundlegender Aspekt bei der Entwicklung von React-Anwendungen. Dieser Leitfaden hilft Ihnen zu verstehen, wie Sie Formulardaten mit Status verarbeiten, Refs für unkontrollierte Komponenten verwenden, eine Formularvalidierung durchführen und komplexe Formulare verwalten, einschließlich mehrstufiger Formulare und Datei-Uploads.

Kontrollierte Komponenten

Kontrollierte Komponenten sind Komponenten, bei denen Formulardaten durch den Status der Komponente verwaltet werden. Dieser Ansatz stellt sicher, dass die React-Komponente die Formulareingaben vollständig kontrolliert, was zu einem vorhersehbareren und besser verwaltbaren Formularverhalten führt.

Umgang mit Formulardaten mit Status

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

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 wird useState zum Verwalten der Formulardaten verwendet, und die handleChange-Funktion aktualisiert den Status, wann immer der Benutzer in die Eingabefelder tippt.

Unkontrollierte Komponenten

Unkontrollierte Komponenten sind Komponenten, bei denen die Formulardaten vom DOM selbst verarbeitet werden. 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 ist wichtig, um sicherzustellen, dass die Benutzereingabe die erforderlichen Kriterien erfüllt, bevor sie übermittelt wird.

Grundlegende Validierungstechniken

Sie können eine grundlegende Validierung hinzufügen, indem Sie die Eingabewerte im Submit-Handler des Formulars überprüfen.

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.

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));
      }}
    >
      {({ errors, touched }) => (
        <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 werden Formik und Yup verwendet, um den Formularstatus und die Validierung zu verwalten. Formik bietet eine flexible und einfache Möglichkeit, Formulare zu verwalten, während Yup bei der Definition von Validierungsschemata hilft.

Komplexes Formularmanagement

Verwalten mehrstufiger Formulare

Die Verwaltung mehrstufiger Formulare umfasst die Handhabung des Formularstatus und die Navigation zwischen den Schritten.

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. Die Funktionen nextStep und prevStep übernehmen die Navigation zwischen Schritten.

Umgang mit Datei-Uploads in Formularen

Die Handhabung von Datei-Uploads erfordert die Verwendung eines Dateieingabeelements und

Verwalten 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 kontrollierter und unkontrollierter Komponenten, das Implementieren der Formularvalidierung und den Umgang mit komplexen Formularen. Wenn Sie diese Konzepte beherrschen, können Sie robuste und benutzerfreundliche Formulare in Ihren React-Anwendungen erstellen. Wenn Sie als Junior-Entwickler eine solide Grundlage in diesen Bereichen erwerben, sind Sie auf dem Weg zum Erfolg, während Sie als React-Entwickler weiter lernen und wachsen.

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