Ustvarite elegantne obrazce Next.js z obrazcem React Hook in uporabniškim vmesnikom Material

Material UI (MUI) je priljubljena knjižnica komponent, ki implementira Googlov sistem Material Design. Zagotavlja široko paleto vnaprej zgrajenih komponent uporabniškega vmesnika, ki jih lahko uporabite za ustvarjanje funkcionalnih in vizualno privlačnih vmesnikov.

Čeprav je zasnovan za React, lahko razširite njegove zmogljivosti na druga ogrodja v Reactovem ekosistemu, kot je Next.js.

Kako začeti z obrazcem React Hook in uporabniškim vmesnikom Material

Obrazec React Hook je priljubljena knjižnica, ki ponuja preprost in deklarativen način za ustvarjanje, upravljanje in preverjanje obrazcev.

Z integracijo Materialni uporabniški vmesniki S komponentami in slogi uporabniškega vmesnika lahko ustvarite obraze, ki so lepega videza in so enostavni za uporabo, ter uporabite dosleden dizajn za svojo aplikacijo Next.js.

Za začetek lokalno zgradite projekt Next.js. Za namene tega vodnika namestite najnovejšo različico Next.js, ki uporablja imenik aplikacij.

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

Nato namestite te pakete v svoj projekt:

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

Tukaj je predogled tega, kar boste zgradili:

Tukaj lahko najdete kodo tega projekta GitHub repozitorij.

Ustvarjanje in oblikovanje obrazcev

React Hook Form ponuja vrsto uporabnih funkcij, vključno z useForm kavelj.

Ta kavelj poenostavlja proces obravnavanja stanja obrazca, preverjanja vnosa in predložitve ter poenostavlja temeljne vidike upravljanja obrazca.

Če želite ustvariti obrazec, ki uporablja ta kavelj, dodajte naslednjo kodo v novo datoteko, src/components/form.js.

Najprej dodajte potrebne uvoze za React Hook Form in pakete MUI:

"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 ponuja zbirko komponent uporabniškega vmesnika, pripravljenih za uporabo, ki jih lahko dodatno prilagodite s posredovanjem rekvizitov za oblikovanje.

Kljub temu, če želite več prilagodljivosti in nadzora nad zasnovo uporabniškega vmesnika, se lahko odločite za uporabo stilizirane metode za oblikovanje elementov uporabniškega vmesnika z lastnostmi CSS. V tem primeru lahko oblikujete glavne komponente obrazca: glavni vsebnik, sam obrazec in polja za vnos besedila.

Tik pod uvozom dodajte to kodo:

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

Vzdrževanje modularne kodne baze je pomembno pri razvoju. Iz tega razloga, namesto da celotno kodo združite v eno datoteko, morate komponente po meri definirati in oblikovati v ločenih datotekah.

Na ta način lahko preprosto uvozite in uporabite te komponente v različnih delih vaše aplikacije, zaradi česar bo vaša koda bolj organizirana in vzdržljiva.

Zdaj pa definirajte funkcionalno komponento:

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

Končno uvozite to komponento v svoj app/page.js mapa. Izbrišite celotno kodo Next.js in jo posodobite z naslednjim:

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



 </main>
 )
}

Zaženite razvojni strežnik in v brskalniku bi morali videti osnovni obrazec z dvema vnosnima poljema in gumbom za pošiljanje.

Ravnanje s preverjanjem obrazca

Obrazec je videti super, vendar še ničesar ne naredi. Da bo deloval, morate dodati kodo za preverjanje veljavnosti. useForm Hook utility funkcije bodo prišle prav pri upravljanju in preverjanje uporabniških vnosov.

Najprej definirajte naslednjo spremenljivko stanja za upravljanje trenutnega stanja obrazca, odvisno od tega, ali je uporabnik vnesel pravilne poverilnice. Dodajte to kodo znotraj funkcionalne komponente:

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

Nato ustvarite funkcijo obdelovalca za preverjanje poverilnic. Ta funkcija bo simulirala zahtevo HTTP API, ki se običajno pojavi, ko odjemalske aplikacije komunicirajo z API-jem za preverjanje pristnosti v ozadju.

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

Komponenti gumba dodajte funkcijo obdelovalca dogodkov onClick – posredujte jo kot rekvizit – da sprožite funkcijo onSubmit, ko uporabnik klikne gumb za oddajo.

onClick={handleSubmit(onSubmit)}

Vrednost formStatus spremenljivka stanja je pomembna, ker bo določila, kako uporabniku posredujete povratne informacije. Če uporabnik vnese pravilne poverilnice, se lahko prikaže sporočilo o uspehu. Če bi imeli v aplikaciji Next.js druge strani, bi jih lahko preusmerili na drugo stran.

Posredovati morate tudi ustrezne povratne informacije, če so poverilnice napačne. Uporabniški vmesnik Material ponuja odlično povratno komponento, ki jo lahko uporabite poleg Reactova tehnika pogojnega upodabljanja za obveščanje uporabnika na podlagi vrednosti formStatus.

Če želite to narediti, dodajte naslednjo kodo tik pod StyledForm začetna oznaka.

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

Zdaj lahko za zajemanje in preverjanje uporabniškega vnosa uporabite register funkcijo za registracijo vnosnih polj obrazca, sledenje njegovim vrednostim in določanje pravil preverjanja.

Ta funkcija sprejme več argumentov, vključno z imenom vnosnega polja in objektom parametrov preverjanja. Ta objekt določa pravila preverjanja veljavnosti za vnosno polje, kot sta določen vzorec in najmanjša dolžina.

Nadaljujte in vključite naslednjo kodo kot rekvizit v uporabniško ime StyledTextField komponento.

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

Zdaj dodajte naslednji predmet kot rekvizit v gesloStyledTextField komponento.

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

Dodajte naslednjo kodo pod polje za vnos uporabniškega imena, da zagotovite vizualne povratne informacije o zahtevah za vnos.

Ta koda bo sprožila opozorilo s sporočilom o napaki, da bi uporabnika obvestila o zahtevah in zagotovila, da popravi morebitne napake pred oddajo obrazca.

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

Na koncu vključite podobno kodo tik pod besedilno polje za vnos gesla:

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

super! S temi spremembami bi morali imeti vizualno privlačen, funkcionalen obrazec, narejen z uporabniškim vmesnikom React Hook Form and Material.

Izboljšajte svoj razvoj Next.js s knjižnicami na strani odjemalca

Material UI in React Hook Form sta le dva primera številnih odličnih knjižnic na strani odjemalca, ki ju lahko uporabite za pospešitev razvoja vmesnika Next.js.

Knjižnice na strani odjemalca ponujajo različne funkcije, pripravljene za proizvodnjo, in vnaprej zgrajene komponente, ki vam lahko pomagajo hitreje in učinkoviteje zgraditi boljše aplikacije na sprednji strani.