Erstellen von Formularen in React.js: Ein Leitfaden für Anfänger

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. Verwenden Sie kontrollierte Komponenten

 
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 (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name}     onChange={handleChange} />
    <input type="email" name="email" value={formData.email}     onChange={handleChange} />
    <button type="submit">Submit</button>
</form>
)}
export default MyForm

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:

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

Es muss eine clientseitige Validierung implementiert werden, 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 (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name} onChange={handleChange} />
    {errors.name && <span>{errors.name}</span>}
    <input type="email" name="email" value={formData.email} onChange={handleChange} />
    {errors.email && <span>{errors.email}</span>}
    <button type="submit">Submit</button>
</form>
);
};

 
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 = () => (
   <div> 
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
      firstName: '',
      lastName: '',
      email: '',
    }}


  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  <Form>
    <label htmlFor="firstName">First Name</label>
    <Field id="firstName" name="firstName" placeholder="Jane" />


    <label htmlFor="lastName">Last Name</label>
    <Field id="lastName" name="lastName" placeholder="Doe" />


    <label htmlFor="email">Email</label>
    <Field
    id="email"
    name="email"
    placeholder="jane@acme.com"
    type="email"
  />
   <button type="submit">Submit</button>
  </Form>
 </Formik>
</div>
);


ReactDOM.render(<BasicForm />, document.getElementById('root'));

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

Fazit

 
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.

Das obige ist der detaillierte Inhalt vonErstellen von Formularen in React.js: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!