Tworzenie stylowych formularzy Next.js za pomocą React Hook Form i Material UI
Material UI (MUI) to popularna biblioteka komponentów, która implementuje system Google Material Design. Zapewnia szeroką gamę gotowych komponentów interfejsu użytkownika, które można wykorzystać do tworzenia funkcjonalnych i atrakcyjnych wizualnie interfejsów.
Chociaż Archetype jest przeznaczony głównie do użytku z Reactem, można go dostosować i rozszerzyć o dodatkowe frameworki, które są częścią szerszego ekosystemu React, takiego jak Next.js.
Pierwsze kroki z React Hook Form i Material UI
React Hook Form to popularna biblioteka, która zapewnia prosty i deklaratywny sposób tworzenia, zarządzania i walidacji formularzy.
Integrując komponentów i stylów interfejsu użytkownika Material UI, możesz tworzyć dobrze wyglądające formularze, które są łatwe w użyciu i stosować spójny wygląd w aplikacji Next.js.
Na początek można skonfigurować lokalne środowisko programistyczne dla aplikacji Next.js, tworząc nowy projekt przy użyciu frameworka Next.js. Aby to zrobić, zaleca się pobranie i zainstalowanie najnowszej wersji Next.js, która będzie wykorzystywać katalog “App” jako bazę.
npx create-next-app@latest next-project --app
Następnie zainstaluj te pakiety w swoim projekcie:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Poniżej znajduje się rzut oka na strukturę, która zostanie wzniesiona, obejmując jej zawiłości i szczegóły w wymowny sposób.
Kod źródłowy wyżej wymienionego projektu jest dostępny za pośrednictwem odpowiedniego repozytorium GitHub.
Tworzenie i stylizacja formularzy
React Hook Form oferuje szereg przydatnych narzędzi, wśród których dominuje hak useForm .
Podejście to ułatwia zarządzanie stanem formularza, weryfikację danych wejściowych i przesyłanie poprzez usprawnienie podstawowych elementów kontroli formularza, zwiększając w ten sposób ogólną wydajność takich procesów.
Aby opracować formularz wykorzystujący ten hak, należy utworzyć nowy plik w katalogu “src/components” i oznaczyć go jako “form.js”.
Aby włączyć do projektu niezbędne zależności dla bibliotek React Hook Form i Material-UI, należy najpierw zaimportować je w następujący sposób:
"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 oferuje szereg prefabrykowanych elementów interfejsu użytkownika, które można dostosować poprzez zastosowanie właściwości stylistycznych. Ta wszechstronność pozwala na spersonalizowaną adaptację w celu spełnienia określonych wymagań projektowych.
Niemniej jednak, aby zwiększyć wszechstronność i kontrolę nad konfiguracją interfejsu użytkownika, można zastosować podejście stylizowane w celu zastosowania atrybutów CSS w celu dostosowania wyglądu różnych elementów interfejsu użytkownika. W ten sposób można modyfikować podstawowe elementy formularza, takie jak jego główna obudowa, sam formularz i poszczególne pola wprowadzania znaków.
Tuż pod importem dodaj ten 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%',
});
Zapewnienie modułowej architektury jest kluczowe podczas tworzenia oprogramowania. Aby osiągnąć ten cel, zaleca się fragmentację kodu w wielu plikach, zamiast konsolidowania wszystkiego w jednym pliku. Takie podejście pozwala na większą organizację i elastyczność podczas pracy z różnymi aspektami aplikacji.
Stosując to podejście, można płynnie integrować i wykorzystywać te elementy w różnych aspektach swojego programu, co skutkuje usprawnioną i łatwą w zarządzaniu bazą kodu.
Teraz zdefiniuj komponent funkcjonalny:
export default function Form() {
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<>
<FormContainer>
<StyledForm>
<StyledTextField
label="Username"
type="text"
/>
<StyledTextField
label="Password"
type="password"
/>
<MuiButton
type="submit"
variant="contained"
color="primary"
margin="5px"
> Submit </MuiButton>
</StyledForm>
</FormContainer>
</>
);
}
Rzeczywiście, po utworzeniu komponentu Page , jak omówiono wcześniej, będziesz musiał zintegrować go z aplikacją, importując go do odpowiedniej strony lub modułu w projekcie. W szczególności należy zlokalizować odpowiedni plik, w którym zarządzana jest nawigacja witryny, taki jak app/page.js , i dodać instancję komponentu Page w żądanej lokalizacji w tym pliku. Jednocześnie należy usunąć z tego pliku wszelki zbędny lub nieistotny kod związany z funkcjonalnością Next.js i zastąpić go dostarczonym szablonem. Umożliwi to płynną integrację niestandardowego zachowania onClickOutside wraz z innymi komponentami na stronie internetowej bez konfliktu z domyślnym zachowaniem Next.js.
import Form from 'src/components/Form'
export default function Home() {
return (
<main >
<Form />
</main>
)
}
Aby rozpocząć proces tworzenia aplikacji internetowej, aktywuj serwer programistyczny, który wygeneruje intuicyjny interfejs z dwoma polami wprowadzania tekstu oraz przyciskiem poleceń w preferowanej przeglądarce internetowej.
Obsługa walidacji formularzy
Wygląd formularza jest atrakcyjny wizualnie; jednak obecnie brakuje mu funkcjonalności, ponieważ nie wykonuje żadnych działań w oparciu o dane wejściowe użytkownika. Aby formularz mógł zacząć działać, konieczne jest włączenie logiki walidacji, która zapewni dokładność i wiarygodność danych wprowadzanych przez użytkownika. Można to osiągnąć poprzez wykorzystanie funkcji użytkowych związanych z formularzem, które zostały zaprojektowane specjalnie do zarządzania i sprawdzania poprawności danych wprowadzanych przez użytkownika.
Sure!Oto przykład, jak można to zaimplementować w komponencie LoginForm przy użyciu haków React i TypeScript:typescriptimport { useState } from ‘react’;interface LoginFormProps {}const LoginForm = ({}: LoginFormProps) => {const [formStatus, setFormStatus] = useState(’’); // inicjalizuje formStatus jako pusty ciągconst handleSubmit = (event: React.FormEvent ) => {event.preventDefault(); if (!validateCredentials(usernameField.value, passwordField.value)) {alert(“Nieprawidłowa nazwa użytkownika lub hasło.”); return; }setFormStatus(‘submitted’); // ustawia formularz
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Następnie opracujemy funkcjonalną jednostkę odpowiedzialną za walidację danych uwierzytelniających użytkownika. Komponent ten będzie emulował transakcję HTTP często spotykaną podczas łączenia aplikacji frontendowych z usługami uwierzytelniania zaplecza.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Włącz instancję funkcji, która jest wyzwalana po interakcji z określonym elementem, przekazując jego oznaczenie jako parametr do wspomnianego komponentu, aby wywołać pożądaną odpowiedź związaną z określoną akcją po interakcji.
onClick={handleSubmit(onSubmit)}
Znaczenie zmiennej stanu formStatus polega na jej zdolności do dyktowania sposobu, w jaki informacje zwrotne są przekazywane użytkownikowi końcowemu. W przypadku, gdy użytkownik dostarczy prawidłowe informacje uwierzytelniające, można zdecydować się na wyświetlenie komunikatu o powodzeniu. Co więcej, jeśli aplikacja zawiera dodatkowe strony w ramach Next.js, przekierowanie na alternatywną stronę staje się realną opcją dla użytkownika.
Ważne jest, aby oferować konstruktywne informacje zwrotne, gdy dane uwierzytelniające są nieprawidłowe. Na szczęście Material-UI zapewnia doskonały komponent informacji zwrotnej, który można wykorzystać w połączeniu z możliwościami renderowania warunkowego Reacta, aby przekazać użytkownikowi status procesu przesyłania formularza, w zależności od wartości zmiennej formStatus.
Aby zaimplementować tę funkcjonalność, wstaw wyżej wymieniony kod bezpośrednio pod otwierającym tagiem StyledForm .
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Aby zarówno uzyskać, jak i zweryfikować dane wejściowe użytkownika, można wykorzystać metodę register do zarejestrowania elementów wejściowych formularza, monitorowania ich wartości i zdefiniowania kryteriów walidacji.
Podana funkcja akceptuje wiele danych wejściowych, które zawierają identyfikator pola wejściowego wraz z instancją parametrów walidacji. Ten ostatni określa kryteria walidacji pola wejściowego, obejmujące określone wzorce i minimalne długości.
Oczywiście, oto przykład, jak włączyć komponent “StyledTextField”, jednocześnie włączając dostarczony fragment kodu:javascriptimport React from ‘react’;import { TextField } from ‘@material-ui/core’;const MyUsername = () => ( Wpisz swoją nazwę użytkownika poniżej Śmiało i dołącz następujący kod jako właściwość w polu username . );export default MyUsername;
{...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'
},
})}
Jasne! Oto przykład, jak można zmodyfikować kod, aby użyć nowego rekwizytu o nazwie additionalObject :jsximport React from ‘react’;// inne importy…const PasswordStyledTextField = ({ additionalObject }) => { // dodany propconst handleTextChange = (text) => { // to samo// …};return (
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Rozważ włączenie następującego kodu HTML bezpośrednio po polu wprowadzania danych logowania użytkownika, aby wizualnie przekazać wszelkie niezbędne specyfikacje wejściowe.
Niniejsza implementacja wykonuje powiadomienie, które zawiera błędny komunikat i wyświetla go w przypadku, gdy użytkownik nie spełnia określonych warunków wstępnych. Celem jest dostarczenie użytkownikowi informacji o niezbędnych kryteriach i zachęcenie go do usunięcia wszelkich rozbieżności przed przesłaniem formularza.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Podsumowując, ważne jest, aby umieścić identyczny kod bezpośrednio pod polem tekstowym wprowadzania hasła, aby uzyskać optymalne wyniki:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Rzeczywiście, wdrożone aktualizacje zaowocują estetycznym i funkcjonalnym formularzem internetowym wykorzystującym React Hook Form i komponenty Material UI.
Usprawnij rozwój Next.js dzięki bibliotekom po stronie klienta
Wykorzystanie Material UI i React Hook Form to tylko kilka przykładów z szerokiej gamy wyjątkowych bibliotek po stronie klienta, które można wykorzystać do przyspieszenia procesu tworzenia front-endu aplikacji Next.js.
Wykorzystanie bibliotek po stronie klienta oferuje szereg wyrafinowanych funkcji i skonstruowanych elementów, które ułatwiają przyspieszone tworzenie wyjątkowych aplikacji front-endowych o zwiększonej wydajności.