Praktikantenebene: Formulare in React verwalten

Formulare sind für das Sammeln von Benutzereingaben in Webanwendungen unerlässlich. Das Verwalten von Formularen in React kann unkompliziert sein, wenn Sie die Grundlagen kontrollierter und unkontrollierter Komponenten, Formularvalidierung und den Umgang mit komplexen Formularen verstehen. Dieser Leitfaden hilft Ihnen beim Einstieg in die Verwaltung von Formularen in React.

Kontrollierte Komponenten

Kontrollierte Komponenten sind Komponenten, bei denen die Formulardaten durch den Status der Komponente verwaltet werden. Das bedeutet, dass die Eingabewerte von React.

gesteuert werden

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 [name, setName] = useState('');
  const [email, setEmail] = useState('');

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

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

export default ControlledForm;

In diesem Beispiel werden die Formulareingaben durch die Namens- und E-Mail-Statusvariablen gesteuert. Der onChange-Ereignishandler 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 [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!name) newErrors.name = 'Name is required';
    if (!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: ${name}, Email: ${email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {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) => {
    setFormData({ ...formData, [e.target.name]: e.target.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 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 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 Praktikant 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 vonPraktikantenebene: Formulare in React verwalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!