Selle funktsionaalsete ja disainiteekide kombinatsiooniga saate oma vormid korda teha.

Materjali kasutajaliides (MUI) on populaarne komponentide kogu, mis rakendab Google'i materjalidisaini süsteemi. See pakub laia valikut eelehitatud kasutajaliidese komponente, mida saate kasutada funktsionaalsete ja visuaalselt atraktiivsete liideste loomiseks.

Kuigi see on loodud Reacti jaoks, saate selle võimalusi laiendada teistele Reacti ökosüsteemi raamistikele, nagu Next.js.

React Hooki vormi ja materjali kasutajaliidese kasutamise alustamine

Reageeri konksuvorm on populaarne teek, mis pakub lihtsat ja deklaratiivset viisi vormide loomiseks, haldamiseks ja kinnitamiseks.

Integreerides Materjali kasutajaliidesed Kasutajaliidese komponentide ja stiilide abil saate luua kena välimusega vorme, mida on lihtne kasutada, ja rakendada oma Next.js rakendusele ühtset kujundust.

Alustamiseks looge Next.js projekt kohapeal. Selle juhendi jaoks installige Next.js'i uusim versioon, mis kasutab rakenduste kataloogi.

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

Järgmisena installige oma projekti järgmised paketid:

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

Siin on eelvaade sellest, mida ehitate:

Selle projekti koodi leiate siit GitHub hoidla.

Vormide loomine ja kujundamine

React Hook Form pakub mitmesuguseid kasulikke funktsioone, sealhulgas kasutusvorm konks.

See konks muudab vormi oleku käsitlemise, sisendi kontrollimise ja esitamise protsessi sujuvamaks, lihtsustades vormihalduse põhiaspekte.

Seda konksu kasutava vormi loomiseks lisage uude faili järgmine kood, src/components/form.js.

Esmalt lisage React Hooki vormi ja MUI pakettide jaoks vajalikud impordid:

"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 pakub kasutusvalmis kasutajaliidese komponentide kogu, mida saate stiilirekvisiite edastades veelgi kohandada.

Sellegipoolest, kui soovite kasutajaliidese kujunduse üle suuremat paindlikkust ja kontrolli, võite kasutada stiilimeetodit kasutajaliidese elementide kujundamiseks CSS-i atribuutidega. Sel juhul saate stiilida vormi põhikomponendid: põhikonteiner, vorm ise ja sisendtekstiväljad.

Lisage otse impordi alla see kood:

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

Modulaarse koodibaasi säilitamine on arenduses oluline. Sel põhjusel peaksite kogu koodi ühte faili koondamise asemel määratlema ja stiilima kohandatud komponendid eraldi failides.

Nii saate hõlpsasti importida ja kasutada neid komponente oma rakenduse erinevates osades, muutes oma koodi organiseeritumaks ja hooldatavamaks.

Nüüd määratlege funktsionaalne 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>
 </>
 );
}

Lõpuks importige see komponent oma app/page.js faili. Kustutage kogu standardplaadi Next.js kood ja värskendage seda järgmisega:

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



 </main>
 )
}

Käivitage arendusserver ja peaksite oma brauseris nägema kahe sisestusvälja ja saatmisnupuga põhivormi.

Vormi kinnitamise käsitlemine

Vorm näeb hea välja, aga ei tee veel midagi. Selle funktsionaalseks muutmiseks peate lisama kinnituskoodi. kasutusvorm konksu utiliidi funktsioonid tulevad kasuks haldamisel ja kasutaja sisendite kinnitamine.

Esmalt määrake vormi praeguse oleku haldamiseks järgmine olekumuutuja, olenevalt sellest, kas kasutaja on esitanud õiged mandaadid. Lisage see kood funktsionaalse komponendi sisse:

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

Järgmisena looge mandaatide kinnitamiseks töötleja funktsioon. See funktsioon simuleerib HTTP API päringut, mis tavaliselt ilmneb siis, kui kliendirakendused suhtlevad tausta autentimise API-ga.

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

Lisage nupukomponendile sündmuste käitleja funktsioon onClick – edastades selle rekvisiidina –, et käivitada funktsioon onSubmit, kui kasutaja klõpsab esitamisnupul.

onClick={handleSubmit(onSubmit)}

Väärtus vormistatus olekumuutuja on oluline, sest see määrab, kuidas te kasutajale tagasisidet annate. Kui kasutaja sisestab õiged mandaadid, võite kuvada eduteate. Kui teie rakenduses Next.js oli muid lehti, saate need teisele lehele ümber suunata.

Samuti peaksite andma asjakohast tagasisidet, kui volikirjad on valed. Materjali kasutajaliides pakub suurepärast tagasisidekomponenti, mida saate koos kasutada Reacti tingimusliku renderdamise tehnika kasutaja teavitamiseks formStatus väärtusest.

Selleks lisage alljärgnev kood Stiilitud vorm avatav silt.

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

Nüüd saate kasutaja sisendi jäädvustamiseks ja kinnitamiseks kasutada Registreeri funktsioon vormi sisendväljade registreerimiseks, selle väärtuste jälgimiseks ja valideerimisreeglite täpsustamiseks.

Sellel funktsioonil on mitu argumenti, sealhulgas sisendvälja nimi ja valideerimisparameetrite objekt. See objekt määrab sisendvälja valideerimisreeglid, nagu konkreetne muster ja minimaalne pikkus.

Jätkake ja lisage järgmine kood kasutajanimesse Stiilitud tekstiväli 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'
 },
})}

Nüüd lisage järgmine objekt rekvisiidina paroolStiilitud tekstiväli komponent.

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

Sisestamisnõuete kohta visuaalse tagasiside andmiseks lisage kasutajanime sisestusvälja alla järgmine kood.

See kood käivitab hoiatuse koos veateatega, et teavitada kasutajat nõuetest ja tagada, et nad parandavad kõik vead enne vormi esitamist.

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

Lõpuks lisage samasugune kood otse parooli sisestamise tekstivälja alla:

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

Vinge! Nende muudatustega peaks teil olema visuaalselt atraktiivne ja funktsionaalne vorm, mis on tehtud React Hooki vormi ja materjali kasutajaliidesega.

Täiustage oma Next.js arendust kliendipoolsete teekide abil

Materjali kasutajaliides ja React Hook Form on vaid kaks näidet paljudest suurepärastest kliendipoolsetest teekidest, mida saate kasutada Next.js'i kasutajaliidese arendamise kiirendamiseks.

Kliendipoolsed teegid pakuvad mitmesuguseid tootmisvalmis funktsioone ja eelehitatud komponente, mis aitavad teil kiiremini ja tõhusamalt luua paremaid esiotsa rakendusi.