Bringen Sie Ordnung in Ihre Formulare mit dieser Kombination aus Funktions- und Designbibliotheken.

Material UI (MUI) ist eine beliebte Komponentenbibliothek, die das Material Design-System von Google implementiert. Es bietet eine breite Palette vorgefertigter UI-Komponenten, mit denen Sie funktionale und optisch ansprechende Schnittstellen erstellen können.

Obwohl es für React entwickelt wurde, können Sie seine Funktionen auf andere Frameworks innerhalb des React-Ökosystems erweitern, wie z. B. Next.js.

Erste Schritte mit React Hook Form und Material UI

Hook-Form reagieren ist eine beliebte Bibliothek, die eine einfache und deklarative Möglichkeit zum Erstellen, Verwalten und Validieren von Formularen bietet.

Durch Integration Material-Benutzeroberflächen Mithilfe von UI-Komponenten und -Stilen können Sie gut aussehende Formulare erstellen, die einfach zu verwenden sind, und ein einheitliches Design auf Ihre Next.js-Anwendung anwenden.

Erstellen Sie zunächst lokal ein Gerüst für ein Next.js-Projekt. Für die Zwecke dieses Handbuchs installieren Sie die

instagram viewer
neueste Version von Next.js, die das App-Verzeichnis nutzt.

npx create-next-app@latest next-project --app

Als nächstes installieren Sie diese Pakete in Ihrem Projekt:

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

Hier ist eine Vorschau dessen, was Sie erstellen werden:

Den Code dieses Projekts finden Sie hier GitHub Repository.

Formulare erstellen und gestalten

React Hook Form bietet eine Vielzahl von Hilfsfunktionen, darunter die useForm Haken.

Dieser Hook rationalisiert den Prozess der Bearbeitung des Formularstatus, der Eingabevalidierung und der Übermittlung und vereinfacht die grundlegenden Aspekte der Formularverwaltung.

Um ein Formular zu erstellen, das diesen Hook nutzt, fügen Sie den folgenden Code zu einer neuen Datei hinzu: src/components/form.js.

Fügen Sie zunächst die erforderlichen Importe für die React Hook Form- und MUI-Pakete hinzu:

"use client"
import React, {useState} from'react';
import { useForm } from'react-hook-form';
import { TextField, Button as MuiButton, Alert } from'@mui/material';
import { styled } from'@mui/system';

MUI bietet eine Sammlung gebrauchsfertiger UI-Komponenten, die Sie durch die Übergabe von Styling-Requisiten weiter anpassen können.

Wenn Sie jedoch mehr Flexibilität und Kontrolle über das UI-Design wünschen, können Sie die styled-Methode verwenden, um Ihre UI-Elemente mit CSS-Eigenschaften zu formatieren. In diesem Fall können Sie die Hauptkomponenten des Formulars formatieren: den Hauptcontainer, das Formular selbst und die Eingabetextfelder.

Fügen Sie direkt unter den Importen diesen Code hinzu:

const FormContainer = styled('div')({
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center',
 justifyContent: 'center',
 height: '100vh',
});
const StyledForm = styled('form')({
 width: '80%',
 maxWidth: '400px',
 padding: '20px',
 borderRadius: '10px',
 border: '2px solid #1E3A8A',
 boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
 backgroundColor: '#ffffff',
 textAlign: 'center',
});
const StyledTextField = styled(TextField)({
 marginBottom: '16px',
 width: '100%',
});

Die Aufrechterhaltung einer modularen Codebasis ist in der Entwicklung wichtig. Aus diesem Grund sollten Sie benutzerdefinierte Komponenten in separaten Dateien definieren und formatieren, anstatt den gesamten Code in einer einzigen Datei zusammenzufassen.

Auf diese Weise können Sie diese Komponenten problemlos in verschiedene Teile Ihrer Anwendung importieren und verwenden, wodurch Ihr Code besser organisiert und wartbar wird.

Definieren Sie nun die Funktionskomponente:

exportdefaultfunctionForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

return (
 <>


 label="Username"
 type="text"
 />
 label="Password"
 type="password"
 />
 type="submit"
 variant="contained"
 color="primary"
 margin="5px"
 > Submit </MuiButton>
 </StyledForm>
 </FormContainer>
 </>
 );
}

Importieren Sie abschließend diese Komponente in Ihr app/page.js Datei. Löschen Sie den gesamten Standard-Next.js-Code und aktualisieren Sie ihn wie folgt:

import Form from'src/components/Form'
exportdefaultfunctionHome() {
return (



 </main>
 )
}

Starten Sie den Entwicklungsserver. In Ihrem Browser sollte ein einfaches Formular mit zwei Eingabefeldern und einer Schaltfläche zum Senden angezeigt werden.

Bearbeitung der Formularvalidierung

Das Formular sieht toll aus, aber es macht noch nichts. Damit es funktioniert, müssen Sie einen Validierungscode hinzufügen. useForm Hook-Hilfsprogrammfunktionen werden sich bei der Verwaltung als nützlich erweisen Validierung der Benutzereingaben.

Definieren Sie zunächst die folgende Statusvariable, um den aktuellen Formularstatus zu verwalten, abhängig davon, ob ein Benutzer die richtigen Anmeldeinformationen angegeben hat. Fügen Sie diesen Code innerhalb der Funktionskomponente hinzu:

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

Erstellen Sie als Nächstes eine Handlerfunktion zur Validierung der Anmeldeinformationen. Diese Funktion simuliert eine HTTP-API-Anfrage, die normalerweise auftritt, wenn Client-Apps mit einer Backend-Authentifizierungs-API interagieren.

const onSubmit = (data) => {
if (data.username 'testuser' && data.password 'password123') {
 setFormStatus({ success: true, error: '' });
 } else {
 setFormStatus({ success: false, error: 'Invalid username or password' });
 }
};

Fügen Sie der Schaltflächenkomponente eine onClick-Ereignishandlerfunktion hinzu und übergeben Sie sie als Requisite, um die onSubmit-Funktion auszulösen, wenn ein Benutzer auf die Schaltfläche „Senden“ klickt.

onClick={handleSubmit(onSubmit)}

Der Wert der formStatus Die Statusvariable ist wichtig, da sie bestimmt, wie Sie dem Benutzer Feedback geben. Wenn der Benutzer die richtigen Anmeldeinformationen eingibt, wird möglicherweise eine Erfolgsmeldung angezeigt. Wenn Ihre Next.js-Anwendung andere Seiten enthält, können Sie diese auf eine andere Seite umleiten.

Sie sollten auch eine entsprechende Rückmeldung geben, wenn die Anmeldeinformationen falsch sind. Material UI bietet eine großartige Feedback-Komponente, die Sie zusätzlich verwenden können Die bedingte Rendering-Technik von React um den Benutzer basierend auf dem Wert von formStatus zu informieren.

Fügen Sie dazu den folgenden Code direkt darunter hinzu StyledForm öffnendes Tag.

{formStatus.success? (
"success">Form submitted successfully</Alert>
): formStatus.error? (
"error">{formStatus.error}</Alert>
): null}

Um Benutzereingaben zu erfassen und zu validieren, können Sie nun die verwenden registrieren Funktion zum Registrieren der Formulareingabefelder, zum Verfolgen ihrer Werte und zum Festlegen der Validierungsregeln.

Diese Funktion benötigt mehrere Argumente, darunter den Namen des Eingabefelds und ein Validierungsparameterobjekt. Dieses Objekt gibt die Validierungsregeln für das Eingabefeld an, z. B. das spezifische Muster und die Mindestlänge.

Machen Sie weiter und fügen Sie den folgenden Code als Requisite in den Benutzernamen ein StyledTextField Komponente.

{...register('username', {
 required: 'Username required',
 pattern: {
 value: /^[a-zA-Z0-9_.-]*$/,
 message: 'Invalid characters used'
 },
 minLength: {
 value: 6,
 message: 'Username must be at least 6 characters'
 },
})}

Fügen Sie nun das folgende Objekt als Requisite hinzu PasswortStyledTextField Komponente.

{...register('password', {
 required: 'Password required',
 minLength: {
 value: 8,
 message: 'Password must be at least 8 characters'
 },
})}

Fügen Sie den folgenden Code unter dem Eingabefeld für den Benutzernamen hinzu, um visuelles Feedback zu den Eingabeanforderungen zu geben.

Dieser Code löst eine Warnung mit einer Fehlermeldung aus, um den Benutzer über die Anforderungen zu informieren und sicherzustellen, dass er etwaige Fehler korrigiert, bevor er das Formular absendet.

{errors.username && <Alertseverity="error">{errors.username.message}Alert>}

Fügen Sie abschließend einen ähnlichen Code direkt unter dem Textfeld für die Passworteingabe ein:

{errors.password && <Alertseverity="error">{errors.password.message}Alert>}

Eindrucksvoll! Mit diesen Änderungen sollten Sie eine optisch ansprechende, funktionale Form haben, die mit React Hook Form und Material UI erstellt wurde.

Verbessern Sie Ihre Next.js-Entwicklung mit clientseitigen Bibliotheken

Material UI und React Hook Form sind nur zwei Beispiele für die vielen großartigen clientseitigen Bibliotheken, die Sie verwenden können, um die Frontend-Entwicklung von Next.js zu beschleunigen.

Clientseitige Bibliotheken bieten eine Vielzahl produktionsbereiter Funktionen und vorgefertigter Komponenten, die Ihnen dabei helfen können, bessere Front-End-Anwendungen schneller und effizienter zu erstellen.