Tegye rendbe űrlapjait a funkcionális és design könyvtárak kombinációjával.

A Material UI (MUI) egy népszerű komponenskönyvtár, amely a Google Material Design rendszerét valósítja meg. Előre beépített felhasználói felület-összetevők széles választékát kínálja, amelyek segítségével funkcionális és tetszetős felületeket hozhat létre.

Annak ellenére, hogy a React számára készült, kiterjesztheti képességeit a React ökoszisztémáján belüli más keretekre, például a Next.js-re.

Kezdő lépések a React Hook Form és Material felhasználói felülettel

React Hook Form egy népszerű könyvtár, amely egyszerű és deklaratív módot biztosít az űrlapok létrehozására, kezelésére és érvényesítésére.

Integrálással Anyag UI-k A felhasználói felület összetevőivel és stílusaival tetszetős, könnyen használható űrlapokat hozhat létre, és következetes kialakítást alkalmazhat Next.js alkalmazásában.

A kezdéshez állítson fel helyileg egy Next.js projektet. Ennek az útmutatónak a céljára telepítse a a Next.js legújabb verziója, amely az App könyvtárat használja.

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

Ezután telepítse ezeket a csomagokat a projektbe:

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

Íme egy előnézet arról, hogy mit fog építeni:

A projekt kódját itt találja meg GitHub adattár.

Formák létrehozása és formázása

A React Hook Form számos segédfunkciót kínál, beleértve a useForm horog.

Ez a hook leegyszerűsíti az űrlap állapotának kezelését, a bemeneti ellenőrzést és a benyújtást, leegyszerűsítve az űrlapkezelés alapvető szempontjait.

Egy olyan űrlap létrehozásához, amely ezt a hook-ot használja, adja hozzá a következő kódot egy új fájlhoz, src/components/form.js.

Először adja hozzá a szükséges importálást a React Hook Form és a MUI csomagokhoz:

"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';

A MUI használatra kész felhasználói felület-összetevők gyűjteményét kínálja, amelyeket a stílus kellékek átadásával tovább testre szabhat.

Mindazonáltal, ha nagyobb rugalmasságot és irányítást szeretne a felhasználói felület kialakítása felett, választhatja a stílusos módszert a felhasználói felület elemeinek CSS-tulajdonságokkal történő stílusozásához. Ebben az esetben stílusozhatja az űrlap fő összetevőit: a fő tárolót, magát az űrlapot és a beviteli szövegmezőket.

Közvetlenül az importálás alatt adja hozzá ezt a kódot:

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

A moduláris kódbázis fenntartása fontos a fejlesztés során. Emiatt ahelyett, hogy az összes kódot egyetlen fájlba tömörítené, külön fájlokban kell meghatároznia és stílusoznia az egyéni összetevőket.

Így könnyedén importálhatja és használhatja ezeket az összetevőket az alkalmazás különböző részein, így a kód rendszerezettebbé és karbantarthatóbbá válik.

Most határozza meg a funkcionális komponenst:

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

Végül importálja ezt az összetevőt a sajátjába app/page.js fájlt. Törölje a teljes Next.js kódot, és frissítse a következőkkel:

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



 </main>
 )
}

Indítsa el a fejlesztői kiszolgálót, és a böngészőjében látnia kell egy alapűrlapot két beviteli mezővel és egy küldés gombbal.

Az űrlap érvényesítésének kezelése

A forma remekül néz ki, de még nem csinál semmit. Ahhoz, hogy működőképes legyen, hozzá kell adnia néhány érvényesítő kódot. useForm hook segédprogramok jól jönnek a kezelésénél és a felhasználói bemenetek érvényesítése.

Először határozza meg a következő állapotváltozót az aktuális űrlapállapot kezeléséhez, attól függően, hogy a felhasználó megadta-e a megfelelő hitelesítő adatokat. Adja hozzá ezt a kódot a funkcionális komponenshez:

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

Ezután hozzon létre egy kezelő függvényt a hitelesítő adatok érvényesítéséhez. Ez a funkció egy HTTP API-kérést szimulál, amely általában akkor fordul elő, amikor az ügyfélalkalmazások interakcióba lépnek egy háttér-hitelesítési API-val.

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

Adjon hozzá egy onClick eseménykezelő funkciót a gombösszetevőhöz – adjon át kellékként – az onSubmit függvény aktiválásához, amikor a felhasználó a küldés gombra kattint.

onClick={handleSubmit(onSubmit)}

Az értéke a formStatus Az állapotváltozó fontos, mert ez határozza meg, hogyan ad visszajelzést a felhasználónak. Ha a felhasználó megadja a megfelelő hitelesítési adatokat, sikeres üzenet jelenhet meg. Ha más oldalak is voltak a Next.js alkalmazásban, átirányíthatja őket egy másik oldalra.

Ha a hitelesítő adatok hibásak, megfelelő visszajelzést kell adnia. A Material UI nagyszerű visszajelzési összetevőt kínál, amelyet együtt használhat A React feltételes renderelési technikája hogy tájékoztassa a felhasználót a formStatus értéke alapján.

Ehhez adja hozzá a következő kódot közvetlenül a StyledForm nyitócímke.

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

Most a felhasználói bevitel rögzítéséhez és érvényesítéséhez használhatja a Regisztráció függvény az űrlap beviteli mezőinek regisztrálásához, értékeinek nyomon követéséhez és az érvényesítési szabályok megadásához.

Ez a függvény több argumentumot vesz igénybe, beleértve a beviteli mező nevét és egy érvényesítési paraméter objektumot. Ez az objektum határozza meg a beviteli mező érvényesítési szabályait, például az adott mintát és a minimális hosszt.

Folytassa, és adja meg a következő kódot kellékként a felhasználónévben Stílusos szövegmező összetevő.

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

Most adja hozzá a következő objektumot kellékként a JelszóStílusos szövegmező összetevő.

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

Adja hozzá a következő kódot a felhasználónév beviteli mezője alá, hogy vizuális visszajelzést adjon a beviteli követelményekről.

Ez a kód riasztást indít el hibaüzenettel, amely tájékoztatja a felhasználót a követelményekről, és biztosítja, hogy az űrlap elküldése előtt kijavítsák a hibákat.

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

Végül írjon be hasonló kódot közvetlenül a jelszóbeviteli mező alá:

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

Fantasztikus! Ezekkel a változtatásokkal látványosan tetszetős, funkcionális formát kell kapnia a React Hook Form és Material UI segítségével.

Javítsa Next.js fejlesztését az ügyféloldali könyvtárakkal

A Material UI és a React Hook Form csak két példa a sok nagyszerű kliensoldali könyvtárra, amelyek segítségével felgyorsíthatja a Next.js előtér-fejlesztését.

Az ügyféloldali könyvtárak számos termelésre kész funkciót és előre beépített komponenst kínálnak, amelyek segítségével gyorsabban és hatékonyabban készíthet jobb előtér-alkalmazásokat.