Udělejte si pořádek ve formulářích pomocí této kombinace funkčních a designových knihoven.

Material UI (MUI) je oblíbená knihovna komponent, která implementuje systém Material Design společnosti Google. Poskytuje širokou škálu předpřipravených komponent uživatelského rozhraní, které můžete použít k vytvoření funkčních a vizuálně atraktivních rozhraní.

I když je navržen pro React, můžete jeho schopnosti rozšířit na další frameworky v rámci ekosystému Reactu, jako je Next.js.

Začínáme s uživatelským rozhraním React Hook Form a Material

Reagovat Hook Form je oblíbená knihovna, která poskytuje jednoduchý a deklarativní způsob vytváření, správy a ověřování formulářů.

Integrací Materiálové uživatelské rozhraní Komponenty uživatelského rozhraní a styly, můžete vytvářet dobře vypadající formuláře, které se snadno používají, a aplikovat konzistentní design na vaši aplikaci Next.js.

Chcete-li začít, lokálně složte projekt Next.js. Pro účely této příručky nainstalujte nejnovější verzi Next.js, která využívá adresář App.

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

Dále nainstalujte do svého projektu tyto balíčky:

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

Zde je náhled toho, co budete stavět:

Zde najdete kód tohoto projektu GitHub úložiště.

Vytváření a styling formulářů

React Hook Form poskytuje řadu užitečných funkcí, včetně useForm háček.

Tento hák zjednodušuje proces zpracování stavu formuláře, ověřování vstupu a odesílání a zjednodušuje základní aspekty správy formulářů.

Chcete-li vytvořit formulář, který využívá tento háček, přidejte do nového souboru následující kód: src/components/form.js.

Nejprve přidejte požadované importy pro 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 sbírku komponent uživatelského rozhraní připravených k použití, které můžete dále upravovat předáním stylingových rekvizit.

Pokud však chcete větší flexibilitu a kontrolu nad návrhem uživatelského rozhraní, můžete se rozhodnout použít metodu stylu ke stylování prvků uživatelského rozhraní pomocí vlastností CSS. V tomto případě můžete stylovat hlavní součásti formuláře: hlavní kontejner, samotný formulář a vstupní textová pole.

Přímo pod importy přidejte 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%',
});

Při vývoji je důležité udržovat modulární kódovou základnu. Z tohoto důvodu byste měli namísto hromadění veškerého kódu do jednoho souboru definovat a stylovat vlastní komponenty v samostatných souborech.

Tímto způsobem můžete snadno importovat a používat tyto komponenty v různých částech vaší aplikace, díky čemuž bude váš kód lépe organizovaný a udržovatelný.

Nyní definujte funkční komponentu:

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

Nakonec importujte tuto komponentu do svého app/page.js soubor. Odstraňte veškerý standardní kód Next.js a aktualizujte jej následujícím způsobem:

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



 </main>
 )
}

Spusťte vývojový server a v prohlížeči byste měli vidět základní formulář se dvěma vstupními poli a tlačítkem pro odeslání.

Manipulace s ověřením formuláře

Forma vypadá skvěle, ale zatím nic nedělá. Aby to fungovalo, musíte přidat nějaký ověřovací kód. useForm funkce hook utility se vám budou hodit při správě a ověření uživatelských vstupů.

Nejprve definujte následující stavovou proměnnou pro správu aktuálního stavu formuláře v závislosti na tom, zda uživatel zadal správné přihlašovací údaje. Přidejte tento kód do funkční komponenty:

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

Dále vytvořte funkci obslužné rutiny pro ověření přihlašovacích údajů. Tato funkce bude simulovat požadavek HTTP API, ke kterému obvykle dochází, když klientské aplikace komunikují s backendovým autentizační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' });
 }
};

Přidejte do komponenty tlačítka funkci obsluhy události onClick – předejte ji jako rekvizitu – pro spuštění funkce onSubmit, když uživatel klepne na tlačítko Odeslat.

onClick={handleSubmit(onSubmit)}

Hodnota formStatus stavová proměnná je důležitá, protože určuje, jak poskytujete zpětnou vazbu uživateli. Pokud uživatel zadá správné přihlašovací údaje, může se zobrazit zpráva o úspěchu. Pokud jste v aplikaci Next.js měli jiné stránky, mohli byste je přesměrovat na jinou stránku.

Měli byste také poskytnout vhodnou zpětnou vazbu, pokud jsou přihlašovací údaje nesprávné. Material UI nabízí skvělou zpětnou vazbu, kterou můžete použít vedle sebe Reactova technika podmíněného vykreslování informovat uživatele na základě hodnoty formStatus.

Chcete-li to provést, přidejte následující kód přímo pod StyledForm otevírací štítek.

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

Nyní můžete k zachycení a ověření uživatelského vstupu použít Registrovat funkce pro registraci vstupních polí formuláře, sledování jejich hodnot a určení pravidel ověřování.

Tato funkce přebírá několik argumentů, včetně názvu vstupního pole a objektu parametrů ověření. Tento objekt určuje pravidla ověření pro vstupní pole, jako je konkrétní vzor a minimální délka.

Pokračujte a vložte následující kód jako podpěru do uživatelského jména 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'
 },
})}

Nyní přidejte následující objekt jako rekvizitu do HesloStyledTextField komponent.

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

Přidejte následující kód pod vstupní pole uživatelského jména, abyste získali vizuální zpětnou vazbu ohledně požadavků na vstup.

Tento kód spustí výstrahu s chybovou zprávou, která uživatele informuje o požadavcích, aby bylo zajištěno, že před odesláním formuláře opraví případné chyby.

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

Nakonec vložte podobný kód přímo pod textové pole pro zadání hesla:

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

Skvělý! S těmito změnami byste měli mít vizuálně přitažlivý, funkční formulář vytvořený pomocí React Hook Form a Material UI.

Vylepšete svůj vývoj Next.js pomocí knihoven na straně klienta

Material UI a React Hook Form jsou jen dva příklady z mnoha skvělých knihoven na straně klienta, které můžete použít k urychlení vývoje frontendu Next.js.

Knihovny na straně klienta poskytují řadu funkcí připravených pro produkci a předpřipravených komponent, které vám mohou pomoci rychleji a efektivněji vytvářet lepší front-endové aplikace.