Urobte si poriadok vo svojich formulároch pomocou tejto kombinácie funkčných a dizajnových knižníc.

Material UI (MUI) je populárna knižnica komponentov, ktorá implementuje systém Material Design spoločnosti Google. Poskytuje širokú škálu vopred vytvorených komponentov používateľského rozhrania, ktoré môžete použiť na vytvorenie funkčných a vizuálne príťažlivých rozhraní.

Aj keď je navrhnutý pre React, jeho možnosti môžete rozšíriť na ďalšie rámce v rámci ekosystému Reactu, ako je Next.js.

Začíname s používateľským rozhraním React Hook Form a Material

Reagovať Hook Form je populárna knižnica, ktorá poskytuje jednoduchý a deklaratívny spôsob vytvárania, správy a overovania formulárov.

Integráciou Materiálové používateľské rozhranie Komponenty používateľského rozhrania a štýly, môžete vytvárať dobre vyzerajúce formuláre, ktoré sa ľahko používajú, a aplikovať konzistentný dizajn na vašu aplikáciu Next.js.

Ak chcete začať, lokálne podporte projekt Next.js. Na účely tejto príručky nainštalujte najnovšiu verziu Next.js, ktorá využíva adresár App.

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

Ďalej nainštalujte do svojho projektu tieto balíky:

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

Tu je ukážka toho, čo budete stavať:

Kód tohto projektu nájdete v tomto GitHub Úložisko.

Vytváranie a styling formulárov

React Hook Form poskytuje množstvo užitočných funkcií, vrátane useForm háčik.

Tento hák zefektívňuje proces spracovania stavu formulára, overovania vstupu a odosielania, čím zjednodušuje základné aspekty správy formulárov.

Ak chcete vytvoriť formulár, ktorý využíva tento háčik, pridajte nasledujúci kód do nového súboru, src/components/form.js.

Najprv pridajte požadované importy pre balíky React Hook Form a 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 poskytuje kolekciu súčastí používateľského rozhrania pripravených na použitie, ktoré môžete ďalej upravovať odovzdaním rekvizít na úpravu štýlu.

Ak však chcete väčšiu flexibilitu a kontrolu nad dizajnom používateľského rozhrania, môžete sa rozhodnúť použiť metódu štýlu na úpravu prvkov používateľského rozhrania pomocou vlastností CSS. V tomto prípade môžete upraviť štýl hlavných komponentov formulára: hlavný kontajner, samotný formulár a vstupné textové polia.

Hneď pod importy pridajte tento kód:

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

Pri vývoji je dôležité udržiavať modulárnu kódovú základňu. Z tohto dôvodu by ste namiesto sústredenia celého kódu do jedného súboru mali definovať a upravovať vlastné komponenty v samostatných súboroch.

Týmto spôsobom môžete jednoducho importovať a používať tieto komponenty v rôznych častiach vašej aplikácie, vďaka čomu je váš kód lepšie organizovaný a udržiavateľný.

Teraz definujte funkčný 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>
 </>
 );
}

Nakoniec importujte tento komponent do svojho app/page.js súbor. Odstráňte všetok štandardný kód Next.js a aktualizujte ho nasledujúcim spôsobom:

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



 </main>
 )
}

Spustite vývojový server a v prehliadači by ste mali vidieť základný formulár s dvoma vstupnými poľami a tlačidlom na odoslanie.

Manipulácia s overením formulára

Forma vyzerá skvele, no zatiaľ nič nerobí. Aby to fungovalo, musíte pridať nejaký overovací kód. useForm Funkcie obslužných programov háku sa vám budú hodiť pri správe a overenie používateľských vstupov.

Najprv definujte nasledujúcu premennú stavu na správu aktuálneho stavu formulára v závislosti od toho, či používateľ poskytol správne poverenia. Pridajte tento kód do funkčného komponentu:

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

Ďalej vytvorte funkciu obsluhy na overenie poverení. Táto funkcia bude simulovať požiadavku HTTP API, ktorá sa zvyčajne vyskytuje, keď klientske aplikácie interagujú s backendovým overovacím API.

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

Pridajte do komponentu tlačidla funkciu obsluhy udalosti onClick – odovzdajte ju ako rekvizitu – na spustenie funkcie onSubmit, keď používateľ klikne na tlačidlo Odoslať.

onClick={handleSubmit(onSubmit)}

Hodnota formStatus stavová premenná je dôležitá, pretože určuje, akým spôsobom poskytnete používateľovi spätnú väzbu. Ak používateľ zadá správne poverenia, môže sa zobraziť správa o úspechu. Ak ste mali v aplikácii Next.js ďalšie stránky, mohli by ste ich presmerovať na inú stránku.

Mali by ste tiež poskytnúť primeranú spätnú väzbu, ak sú poverenia nesprávne. Material UI ponúka skvelú spätnú väzbu, ktorú môžete použiť spolu Technika podmieneného vykresľovania React informovať používateľa na základe hodnoty formStatus.

Ak to chcete urobiť, pridajte nasledujúci kód priamo pod StyledForm otvárací štítok.

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

Teraz na zachytenie a overenie používateľského vstupu môžete použiť Registrovať na registráciu vstupných polí formulára, sledovanie jeho hodnôt a špecifikovanie pravidiel overenia.

Táto funkcia má niekoľko argumentov vrátane názvu vstupného poľa a objektu validačných parametrov. Tento objekt špecifikuje overovacie pravidlá pre vstupné pole, ako je špecifický vzor a minimálna dĺžka.

Pokračujte a zahrňte nasledujúci kód ako rekvizitu do používateľského mena 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'
 },
})}

Teraz pridajte nasledujúci objekt ako rekvizitu do hesloStyledTextField komponent.

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

Pridajte nasledujúci kód pod pole na zadanie používateľského mena, aby ste poskytli vizuálnu spätnú väzbu týkajúcu sa požiadaviek na vstup.

Tento kód spustí upozornenie s chybovou správou, aby informoval používateľa o požiadavkách, aby sa zabezpečilo, že pred odoslaním formulára opraví všetky chyby.

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

Nakoniec vložte podobný kód priamo pod textové pole na zadanie hesla:

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

Úžasné! Vďaka týmto zmenám by ste mali mať vizuálne príťažlivý funkčný formulár vytvorený pomocou používateľského rozhrania React Hook Form a Material.

Vylepšite svoj vývoj Next.js pomocou knižníc na strane klienta

Material UI a React Hook Form sú len dva príklady mnohých skvelých knižníc na strane klienta, ktoré môžete použiť na urýchlenie vývoja frontendu Next.js.

Knižnice na strane klienta poskytujú množstvo funkcií pripravených na produkciu a vopred zostavených komponentov, ktoré vám môžu pomôcť rýchlejšie a efektívnejšie vytvárať lepšie front-end aplikácie.