Formulare sind ein wesentlicher Bestandteil von Webanwendungen und ermöglichen die Benutzerinteraktion und Datenerfassung. In React.js umfasst das Erstellen von Formularen die Verwendung von Zustandsverwaltung und komponentengesteuerter Architektur, um Effizienz und Wartbarkeit sicherzustellen. In diesem Leitfaden werden Best Practices zum Erstellen von Formularen in React.js behandelt, um Ihre Anwendung robust und benutzerfreundlich zu machen.
 

1. Kontrollierte Komponenten verwenden

 
Kontrollierte Komponenten sind die bevorzugte Methode zur Verarbeitung von Formulareingaben in React. Sie belassen Formulardaten im Komponentenzustand und erleichtern so die Verwaltung und Validierung.
 
Speichern Sie alle Formulareingabewerte in einem Status. Erstellen Sie ein Objekt und ordnen Sie alle Eingaben ihrer Eigenschaft im Status zu, Beispiel unten

import React, { useState } from 'react';

const MyForm = () => {


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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  

2. Fehlerbehandlung

 
Fehlerbehandlung und -validierung sind ein wichtiger Bestandteil eines Formulars. Sie müssen jeden vom Benutzer eingegebenen Wert validieren und auf Fehler prüfen und alle Fälle behandeln, wie zum Beispiel:

• Erhalte null/undefiniert
• Leeren Wert erhalten
• Ungültiger Datentyp usw.

Muss eine clientseitige Validierung implementieren, um die Benutzererfahrung zu verbessern und die Serverlast zu reduzieren, was letztendlich die Leistung verbessert. Nutzen Sie Bibliotheken wie Yup oder benutzerdefinierte Validierungslogik, um die Datenintegrität sicherzustellen.

Mal sehen, wie man eine benutzerdefinierte Validierungslogik implementiert

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  

 
Um die Arbeit zu erleichtern, müssen Sie das Yup-Paket verwenden, um die Formulardaten reibungslos zu validieren. Es ist ein sehr beliebtes Paket, das mit Formularbibliotheken wie React-Hook-Form oder Formik verwendet wird.
Yup-Dokumente: https://www.npmjs.com/package/yup
 

3. Nutzen Sie Bibliotheken von Drittanbietern

 
Bibliotheken wie Formik und React Hook Form vereinfachen die Formularverwaltung, bieten sofort leistungsstarke Funktionen und erleichtern Entwicklern das Erstellen und Validieren von Formularen auf skalierbarere und flexiblere Weise

Mit Formik:

Dokumente:- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   
 
    
Sign Up
     {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  

    First Name
    Last Name
    Email
    Submit
  
 
);


ReactDOM.render(, document.getElementById('root'));

Klicken Sie hier, um die Live-Formik-Demo anzusehen

Abschluss

 
Das Erstellen von Formularen in React.js kann einfach und effizient sein, wenn Sie diese Best Practices befolgen. Verwenden Sie kontrollierte Komponenten für die Statusverwaltung, validieren Sie Eingaben gründlich, nutzen Sie Bibliotheken von Drittanbietern, verbessern Sie UX mit dem richtigen Stil und optimieren Sie die Leistung, um reaktionsfähige und robuste Formulare zu erstellen.
Durch die Einhaltung dieser Richtlinien können Sie sicherstellen, dass Ihre Formulare zuverlässig, benutzerfreundlich und wartbar sind und sowohl Benutzern als auch Entwicklern ein nahtloses Erlebnis bieten.