Sutvarkykite formas naudodami šį funkcinių ir dizaino bibliotekų derinį.

Material UI (MUI) yra populiari komponentų biblioteka, kurioje įdiegta Google medžiagų projektavimo sistema. Jame yra daug iš anksto sukurtų vartotojo sąsajos komponentų, kuriuos galite naudoti kurdami funkcines ir vizualiai patrauklias sąsajas.

Nors jis sukurtas „React“, galite išplėsti jo galimybes į kitas „React“ ekosistemos sistemas, pvz., „Next.js“.

Darbo su „React Hook“ formos ir medžiagos vartotojo sąsaja pradžia

Reagavimo kablio forma yra populiari biblioteka, kuri suteikia paprastą ir deklaratyvų būdą formoms kurti, tvarkyti ir patvirtinti.

Integruojant Medžiagos vartotojo sąsajos UI komponentai ir stiliai, galite sukurti gražiai atrodančias formas, kurias paprasta naudoti, ir pritaikyti nuoseklų dizainą savo Next.js programai.

Norėdami pradėti, pastatykite Next.js projektą vietoje. Šio vadovo tikslais įdiekite naujausia Next.js versija, kurioje naudojamas programų katalogas.

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

Tada įdiekite šiuos paketus savo projekte:

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

Čia yra peržiūra, ką sukursite:

Šio projekto kodą rasite čia GitHub saugykla.

Formų kūrimas ir formavimas

„React Hook Form“ suteikia įvairių naudingų funkcijų, įskaitant naudojimo Forma kabliukas.

Šis kabliukas supaprastina formos būsenos tvarkymo, įvesties patvirtinimo ir pateikimo procesą, supaprastindamas pagrindinius formos valdymo aspektus.

Norėdami sukurti formą, kuri naudoja šį kabliuką, į naują failą pridėkite šį kodą, src/components/form.js.

Pirmiausia pridėkite reikiamus „React Hook Form“ ir MUI paketų importus:

"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 yra paruoštų naudoti vartotojo sąsajos komponentų rinkinys, kurį galite toliau tinkinti pateikdami stiliaus rekvizitus.

Nepaisant to, jei norite daugiau lankstumo ir valdyti vartotojo sąsajos dizainą, galite pasirinkti stilizuotą metodą, kad sukurtumėte UI elementų stilių naudodami CSS ypatybes. Tokiu atveju galite stilizuoti pagrindinius formos komponentus: pagrindinį konteinerį, pačią formą ir įvesties teksto laukus.

Iš karto po importu pridėkite šį kodą:

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

Kuriant svarbu išlaikyti modulinę kodų bazę. Dėl šios priežasties, užuot sujungę visą kodą į vieną failą, turėtumėte apibrėžti ir stilizuoti pasirinktinius komponentus atskiruose failuose.

Tokiu būdu galite lengvai importuoti ir naudoti šiuos komponentus įvairiose programos dalyse, todėl jūsų kodas bus tvarkomas ir prižiūrimas.

Dabar apibrėžkite funkcinį 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>
 </>
 );
}

Galiausiai importuokite šį komponentą į savo app/page.js failą. Ištrinkite visą pagrindinį Next.js kodą ir atnaujinkite jį taip:

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



 </main>
 )
}

Paleiskite kūrimo serverį ir naršyklėje turėtumėte pamatyti pagrindinę formą su dviem įvesties laukais ir pateikimo mygtuku.

Formos patvirtinimo tvarkymas

Forma atrodo puikiai, bet dar nieko nedaro. Kad jis veiktų, turite pridėti tam tikrą patvirtinimo kodą. naudojimo Forma hook naudingumo funkcijos pravers tvarkant ir vartotojo įvestų duomenų patvirtinimas.

Pirmiausia apibrėžkite šį būsenos kintamąjį, kad galėtumėte valdyti dabartinę formos būseną, atsižvelgiant į tai, ar vartotojas pateikė teisingus kredencialus. Pridėkite šį kodą funkciniame komponente:

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

Tada sukurkite tvarkyklės funkciją, kad patvirtintumėte kredencialus. Ši funkcija imituos HTTP API užklausą, kuri paprastai atsiranda, kai kliento programos sąveikauja su galinio autentifikavimo API.

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

Pridėkite onClick įvykių tvarkyklės funkciją prie mygtuko komponento (perduodami ją kaip rekvizitą), kad suaktyvintumėte funkciją onSubmit, kai vartotojas spustelėja pateikimo mygtuką.

onClick={handleSubmit(onSubmit)}

Vertė formBūsena būsenos kintamasis yra svarbus, nes nuo jo priklausys, kaip vartotojui pateikiate grįžtamąjį ryšį. Jei vartotojas įveda teisingus kredencialus, galite parodyti sėkmės pranešimą. Jei savo Next.js programoje turėjote kitų puslapių, galite juos nukreipti į kitą puslapį.

Taip pat turėtumėte pateikti atitinkamą atsiliepimą, jei kredencialai neteisingi. Material UI siūlo puikų grįžtamojo ryšio komponentą, kurį galite naudoti kartu React sąlyginio atvaizdavimo technika informuoti vartotoją, remiantis formStatus verte.

Norėdami tai padaryti, pridėkite šį kodą tiesiai po Stilizuota forma atidarymo žyma.

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

Dabar, norėdami užfiksuoti ir patvirtinti vartotojo įvestį, galite naudoti Registruotis funkcija registruoti formos įvesties laukus, sekti jo reikšmes ir nurodyti patvirtinimo taisykles.

Šiai funkcijai reikia kelių argumentų, įskaitant įvesties lauko pavadinimą ir tikrinimo parametrų objektą. Šis objektas nurodo įvesties lauko patvirtinimo taisykles, pvz., konkretų šabloną ir minimalų ilgį.

Eikite į priekį ir įtraukite šį kodą kaip rekvizitą į vartotojo vardą Stilingas teksto laukas komponentas.

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

Dabar pridėkite šį objektą kaip rekvizitą į SlaptažodisStilingas teksto laukas komponentas.

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

Pridėkite šį kodą po naudotojo vardo įvesties lauku, kad pateiktumėte vaizdinį atsiliepimą apie įvesties reikalavimus.

Šis kodas suaktyvins įspėjimą su klaidos pranešimu, kad informuotų vartotoją apie reikalavimus ir užtikrintų, kad jis ištaisytų klaidas prieš pateikdamas formą.

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

Galiausiai įtraukite panašų kodą tiesiai po slaptažodžio įvesties teksto lauku:

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

Nuostabu! Atlikę šiuos pakeitimus, turėtumėte turėti vizualiai patrauklią, funkcionalią formą, sukurtą naudojant „React Hook Form“ ir „Material UI“.

Pagerinkite Next.js kūrimą naudodami kliento bibliotekas

Material UI ir React Hook Form yra tik du pavyzdžiai iš daugelio puikių kliento bibliotekų, kurias galite naudoti norėdami paspartinti Next.js sąsajos kūrimą.

Kliento pusės bibliotekose yra įvairių gamybai paruoštų funkcijų ir iš anksto sukurtų komponentų, kurie gali padėti greičiau ir efektyviau kurti geresnes priekines programas.