Få styr på dine formularer med denne kombination af funktionelle og designbiblioteker.

Material UI (MUI) er et populært komponentbibliotek, der implementerer Googles Material Design-system. Det giver en bred vifte af forudbyggede UI-komponenter, som du kan bruge til at skabe funktionelle og visuelt tiltalende grænseflader.

Selvom det er designet til React, kan du udvide dets muligheder til andre rammer i Reacts økosystem, som Next.js.

Kom godt i gang med React Hook Form og Material UI

Reager Hook Form er et populært bibliotek, der giver en enkel og deklarativ måde at oprette, administrere og validere formularer på.

Ved at integrere Materiale UI'er UI-komponenter og stilarter, kan du oprette flotte formularer, der er nemme at bruge, og anvende et ensartet design på din Next.js-applikation.

For at komme i gang skal du stilladsere et Next.js-projekt lokalt. Med henblik på denne vejledning skal du installere seneste version af Next.js, som gør brug af App-biblioteket.

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

Installer derefter disse pakker i dit projekt:

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

Her er en forhåndsvisning af, hvad du vil bygge:

Du kan finde dette projekts kode i denne GitHub depot.

Oprettelse og styling af formularer

React Hook Form giver en række forskellige hjælpefunktioner, herunder brug Form krog.

Denne krog strømliner processen med at håndtere formulartilstand, inputvalidering og indsendelse, hvilket forenkler de grundlæggende aspekter af formularhåndtering.

For at oprette en formular, der gør brug af denne hook, skal du tilføje følgende kode til en ny fil, src/components/form.js.

Først skal du tilføje de nødvendige importer til React Hook Form og MUI-pakkerne:

"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 giver en samling klar-til-brug UI-komponenter, som du kan tilpasse yderligere ved at videregive styling-rekvisitter.

Ikke desto mindre, hvis du ønsker mere fleksibilitet og kontrol over UI-designet, kan du vælge at bruge den stylede metode til at style dine UI-elementer med CSS-egenskaber. I dette tilfælde kan du style formularens hovedkomponenter: hovedbeholderen, selve formularen og inputtekstfelterne.

Tilføj denne kode lige under importen:

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%',
});

Vedligeholdelse af en modulær kodebase er vigtig i udviklingen. Af denne grund bør du, i stedet for at samle al koden i en enkelt fil, definere og style tilpassede komponenter i separate filer.

På denne måde kan du nemt importere og bruge disse komponenter på tværs af forskellige dele af din applikation, hvilket gør din kode mere organiseret og vedligeholdelig.

Definer nu den funktionelle komponent:

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>
 </>
 );
}

Til sidst importerer du denne komponent i din app/page.js fil. Slet al boilerplate Next.js-koden og opdater den med følgende:

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



 </main>
 )
}

Start udviklingsserveren, og du skulle se en grundlæggende formular med to inputfelter og en send-knap i din browser.

Håndtering af formularvalidering

Formen ser flot ud, men den gør ikke noget endnu. For at gøre det funktionelt skal du tilføje en valideringskode. brug Form hook utility-funktioner vil være nyttige, når du administrerer og validering af brugerinput.

Først skal du definere følgende tilstandsvariabel for at administrere den aktuelle formularstatus, afhængigt af om en bruger har angivet de korrekte legitimationsoplysninger. Tilføj denne kode i den funktionelle komponent:

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

Opret derefter en handlerfunktion for at validere legitimationsoplysningerne. Denne funktion vil simulere en HTTP API-anmodning, der typisk opstår, når klientapps interagerer med en backend-godkendelses-API.

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

Tilføj en onClick-hændelseshåndteringsfunktion til knapkomponenten – giv den som en rekvisit – for at udløse onSubmit-funktionen, når en bruger klikker på send-knappen.

onClick={handleSubmit(onSubmit)}

Værdien af formStatus tilstandsvariabel er vigtig, fordi den vil bestemme, hvordan du giver feedback til brugeren. Hvis brugeren indtaster de korrekte legitimationsoplysninger, viser du muligvis en succesmeddelelse. Hvis du havde andre sider i din Next.js-applikation, kunne du omdirigere dem til en anden side.

Du bør også give passende feedback, hvis legitimationsoplysningerne er forkerte. Material UI tilbyder en fantastisk feedback-komponent, som du kan bruge sammen med Reacts betingede gengivelsesteknik at informere brugeren, baseret på værdien af ​​formStatus.

For at gøre dette skal du tilføje følgende kode lige under StyledForm åbningsmærke.

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

Nu, for at fange og validere brugerinput, kan du bruge Tilmeld funktion til at registrere formularens inputfelter, spore dens værdier og angive valideringsreglerne.

Denne funktion tager flere argumenter, herunder navnet på inputfeltet og et valideringsparameterobjekt. Dette objekt specificerer valideringsreglerne for inputfeltet, såsom det specifikke mønster og minimumslængde.

Gå videre og medtag følgende kode som en rekvisit i brugernavnet StyledTextField komponent.

{...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'
 },
})}

Tilføj nu følgende objekt som en rekvisit i adgangskodeStyledTextField komponent.

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

Tilføj følgende kode under indtastningsfeltet for brugernavn for at give visuel feedback om inputkrav.

Denne kode vil udløse en advarsel med en fejlmeddelelse for at informere brugeren om kravene, for at sikre, at de retter eventuelle fejl, før formularen indsendes.

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

Til sidst skal du inkludere lignende kode lige under adgangskodeindtastningstekstfeltet:

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

Fantastisk! Med disse ændringer bør du have en visuelt tiltalende, funktionel form lavet med React Hook Form og Material UI.

Forbedre din Next.js-udvikling med klientsidebiblioteker

Material UI og React Hook Form er blot to eksempler på de mange fantastiske klientsidebiblioteker, som du kan bruge til at fremskynde Next.js frontend-udvikling.

Biblioteker på klientsiden tilbyder en række produktionsklare funktioner og forudbyggede komponenter, som kan hjælpe dig med at bygge bedre frontend-applikationer hurtigere og mere effektivt.