ReactJS - Formik: Erstellung eines Ausgabenformulars

Hallo那里，未来的React开发者们！今天，我们将踏上一段激动人心的旅程，探索React中的表单处理世界，使用一个名为Formik fantastische库。在本教程结束时，您将能够像专业人士一样创建时尚高效的表单。那么，让我们开始吧！

ReactJS - Formik

Was ist Formik?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was Formik ist und warum es ein solch großer Game-Changer in der React-Entwicklung ist.

Formik ist eine beliebte Bibliothek, die die Formularverarbeitung in React-Anwendungen vereinfacht. Es kümmert sich um die mühsamen Teile von Formularen wie das Verwalten des Formularzustands, die Validierung und die Übermittlung, allowing Ihnen, sich auf das zu konzentrieren, was am wichtigsten ist - die Logik Ihrer Anwendung.

Stellen Sie sich Formik als Ihren persönlichen Formularassistenten vor. Genau wie ein guter Assistent alle Papierkram für Sie erledigen würde, verwaltet Formik alle formbezogenen Aufgaben, leaving Sie frei, sich auf das große Ganze zu konzentrieren.

Einrichten unseres Projekts

Zuerst einmal, lassen Sie uns unser Projekt einrichten. Wir gehen davon aus, dass Sie bereits Node.js auf Ihrem Computer installiert haben. Wenn nicht, gehen Sie einfach zur offiziellen Node.js-Website und installieren Sie es.

Öffnen Sie Ihr Terminal und führen Sie die folgenden Befehle aus:

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

Diese Befehle erstellen eine neue React-App, installieren Formik und Yup (eine Bibliothek für Formularvalidierung) und starten den Entwicklungsserver.

Erstellen unseres Ausgabenformulars

Nun, da wir unser Projekt eingerichtet haben, lassen Sie uns unser Ausgabenformular erstellen. Wir werden ein einfaches Formular erstellen, das es Benutzern ermöglicht, eine Ausgabenbeschreibung und einen Betrag einzugeben.

Schritt 1: Grundlegende Formularstruktur

Lassen Sie uns mit der Erstellung einer grundlegenden Formularstruktur beginnen. Öffnen Sie Ihre src/App.js Datei und ersetzen Sie deren Inhalt durch den folgenden Code:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>Ausgabenformular</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Beschreibung</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Betrag</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Einreichen
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Lassen Sie uns das, was hier passiert, auseinandernehmen:

Wir importieren die notwendigen Komponenten von Formik.
Wir erstellen ein Formik-Komponente, das unser Formular umgibt.
Wir setzen die initialValues für unsere Formularfelder.
Wir definieren eine onSubmit-Funktion, die die Formularübermittlung handhabt.
Wir verwenden Formiks Form, Field und ErrorMessage-Komponenten, um unsere Formularstruktur zu erstellen.

Schritt 2: Hinzufügen von Validierung

Nun fügen wir einige Validierungen zu unserem Formular hinzu. Wir verwenden Yup dafür. Aktualisieren Sie Ihre App.js Datei wie folgt:

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

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, 'Zu kurz!')
.max(50, 'Zu lang!')
.required('Erforderlich'),
amount: Yup.number()
.positive(' Muss positiv sein')
.required('Erforderlich'),
});

function App() {
return (
<div className="App">
<h1>Ausgabenformular</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Beschreibung</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Betrag</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Einreichen
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Hier ist, was wir hinzugefügt haben:

Wir importieren Yup und definieren ein Validierungsschema (ExpenseSchema).
Wir fügen die validationSchema-Eigenschaft zu unserem Formik-Komponenten hinzu.

Jetzt wird unser Formular vor der Übermittlung validiert!

Schritt 3: Styling unseres Formulars

Fügen wir einige grundlegende Stile hinzu, um unser Formular schöner aussehen zu lassen. Erstellen Sie eine neue Datei namens App.css in Ihrem src-Ordner und fügen Sie den folgenden CSS-Code hinzu:

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

Nun aktualisieren Sie Ihre App.js, um diese CSS-Datei zu importieren:

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

// ... der Rest des Codes bleibt gleich

Schlussfolgerung

Glückwunsch! Sie haben gerade ein funktionsfähiges Ausgabenformular mit Formik und React erstellt. Dies ist erst der Anfang dessen, was Sie mit Formik erreichen können. Während Sie Ihre Reise durch React fortsetzen, werden Sie feststellen, dass Formik ein unersetzliches Werkzeug für die Handhabung von Formularen jeglicher Komplexität ist.

Denken Sie daran, Übung macht den Meister. Versuchen Sie, dieses Formular zu ändern, neue Felder hinzuzufügen oder vollständig neue Formulare mit dem, was Sie gelernt haben, zu erstellen. Die Welt der React-Entwicklung ist riesig und spannend, und Sie sind auf dem besten Weg, ein Teil davon zu werden!

Frohes Coden und möge Ihre Formulare immer reibungslos validieren! ?

Formik Methoden-Tabelle

Hier ist eine Tabelle mit einigen häufig verwendeten Formik-Methoden:

Methode	Beschreibung
`handleSubmit`	Handhabt die Formularübermittlung
`handleChange`	Handhabt Änderungen an Formularfeldern
`handleBlur`	Handhabt, wenn ein Feld den Fokus verliert
`setFieldValue`	Setzt manuell den Wert eines Feldes
`setFieldTouched`	Setzt manuell den Berührungszustand eines Feldes
`validateForm`	Ruft manuell die Formularvalidierung aus
`resetForm`	Setzt das Formular auf seine�始 Werte zurück
`setErrors`	Setzt manuell Formularfehler
`setStatus`	Setzt ein oberstes Statusobjekt
`setSubmitting`	Setzt den Übermittlungszustand des Formulars

Diese Methoden geben Ihnen feingranulare Kontrolle über das Verhalten und den Zustand Ihres Formulars. Wenn Sie sich zunehmend mit Formik wohlfühlen, werden Sie diese Methoden verwenden, um komplexere und interaktive Formulare zu erstellen.

Credits: Image by storyset

Vorheriges Tutorial:

ReactJS - Unkontrolliertes Komponente

Nächstes Tutorial:

ReactJS - Bedingte Renderung