Material UI (MUI) to popularna biblioteka komponentów implementująca system Material Design firmy Google. Zapewnia szeroką gamę gotowych komponentów interfejsu użytkownika, których można używać do tworzenia funkcjonalnych i atrakcyjnych wizualnie interfejsów.
Mimo że jest przeznaczony dla React, możesz rozszerzyć jego możliwości na inne frameworki w ekosystemie React, takie jak Next.js.
Spis treści:
Pierwsze kroki z formularzem React Hook i interfejsem użytkownika materiałów
Reaguj na formę haka to popularna biblioteka zapewniająca prosty i deklaratywny sposób tworzenia, zarządzania i sprawdzania formularzy.
Integrując Materiałowy interfejs użytkownika Komponenty i style interfejsu użytkownika umożliwiają tworzenie dobrze wyglądających i łatwych w użyciu formularzy oraz stosowanie spójnego projektu w aplikacji Next.js.
Aby rozpocząć, utwórz lokalnie projekt Next.js. Na potrzeby tego przewodnika zainstaluj najnowszą wersję Next.js, która korzysta z katalogu aplikacji.
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
Oto podgląd tego, co zbudujesz:
Kod tego projektu znajdziesz w this GitHub magazyn.
Tworzenie i stylizacja formularzy
React Hook Form zapewnia różnorodne funkcje narzędziowe, w tym hook useForm.
Ten hak usprawnia proces obsługi stanu formularza, sprawdzania poprawności danych wejściowych i przesyłania, upraszczając podstawowe aspekty zarządzania formularzami.
Aby utworzyć formularz korzystający z tego hooka, dodaj następujący kod do nowego pliku src/components/form.js.
Najpierw dodaj wymagane importy dla pakietów React Hook Form i 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 udostępnia kolekcję gotowych do użycia komponentów interfejsu użytkownika, które można dodatkowo dostosować, przekazując rekwizyty stylizujące.
Niemniej jednak, jeśli chcesz większej elastyczności i kontroli nad projektem interfejsu użytkownika, możesz zdecydować się na użycie metody stylizowanej, aby nadać styl elementom interfejsu użytkownika właściwości CSS. W tym przypadku możesz stylizować główne komponenty formularza: główny kontener, sam formularz i pola tekstu wejściowego.
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%',
});
Utrzymanie modułowej bazy kodu jest ważne w rozwoju. Z tego powodu, zamiast wrzucać cały kod do jednego pliku, należy zdefiniować i nadać styl niestandardowym komponentom w oddzielnych plikach.
W ten sposób możesz łatwo importować te komponenty i używać ich w różnych częściach aplikacji, dzięki czemu kod będzie lepiej zorganizowany i łatwiejszy w utrzymaniu.
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>
</>
);
}
Na koniec zaimportuj ten komponent do pliku app/page.js. Usuń cały standardowy kod Next.js i zaktualizuj go za pomocą następujących elementów:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Uruchom serwer programistyczny. Powinieneś zobaczyć w przeglądarce podstawowy formularz z dwoma polami wejściowymi i przyciskiem przesyłania.
Obsługa walidacji formularza
Formularz wygląda świetnie, ale jeszcze nic nie robi. Aby było funkcjonalne, musisz dodać kod weryfikacyjny. Funkcje narzędzia hook useForm przydadzą się podczas zarządzania danymi wejściowymi użytkownika i sprawdzania ich poprawności.
Najpierw zdefiniuj następującą zmienną stanu, aby zarządzać bieżącym stanem formularza, w zależności od tego, czy użytkownik podał prawidłowe dane uwierzytelniające. Dodaj ten kod wewnątrz komponentu funkcjonalnego:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Następnie utwórz funkcję obsługi, aby sprawdzić poświadczenia. Ta funkcja symuluje żądanie interfejsu API HTTP, które zwykle występuje, gdy aplikacje klienckie wchodzą w interakcję z interfejsem API 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' });
}
};
Dodaj funkcję obsługi zdarzenia onClick do komponentu przycisku — przekazując ją jako opcję — aby uruchomić funkcję onSubmit, gdy użytkownik kliknie przycisk przesyłania.
onClick={handleSubmit(onSubmit)}
Wartość zmiennej stanu formStatus jest ważna, ponieważ określa, w jaki sposób przekazujesz użytkownikowi informację zwrotną. Jeśli użytkownik wprowadzi prawidłowe poświadczenia, może zostać wyświetlony komunikat o powodzeniu. Jeśli w aplikacji Next.js masz inne strony, możesz przekierować je na inną stronę.
Powinieneś także przekazać odpowiednią opinię, jeśli dane uwierzytelniające są nieprawidłowe. Material UI oferuje świetny komponent informacji zwrotnej, którego można używać wraz z techniką renderowania warunkowego React, aby informować użytkownika na podstawie wartości formStatus.
Aby to zrobić, dodaj następujący kod tuż pod tagiem otwierającym StyledForm.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Teraz, aby przechwycić i zweryfikować dane wprowadzone przez użytkownika, możesz użyć funkcji rejestru do zarejestrowania pól wejściowych formularza, śledzenia ich wartości i określenia reguł sprawdzania poprawności.
Ta funkcja pobiera kilka argumentów, w tym nazwę pola wejściowego i obiekt parametrów walidacji. Obiekt ten określa zasady sprawdzania poprawności pola wejściowego, takie jak określony wzorzec i minimalna długość.
Śmiało, dołącz następujący kod jako rekwizyt w komponencie Nazwa użytkownika StyledTextField.
{...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 dodaj następujący obiekt jako rekwizyt w komponencie Hasło StyledTextField.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Dodaj następujący kod poniżej pola wprowadzania nazwy użytkownika, aby wyświetlić wizualną informację zwrotną na temat wymagań wejściowych.
Ten kod wywoła alert z komunikatem o błędzie, aby poinformować użytkownika o wymaganiach i upewnić się, że poprawi on wszelkie błędy przed przesłaniem formularza.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Na koniec umieść podobny kod tuż pod polem tekstowym wprowadzania hasła:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Wspaniały! Dzięki tym zmianom powinieneś mieć atrakcyjną wizualnie, funkcjonalną formę utworzoną za pomocą React Hook Form i Material UI.
Usprawnij rozwój Next.js dzięki bibliotekom po stronie klienta
Material UI i React Hook Form to tylko dwa przykłady z wielu świetnych bibliotek po stronie klienta, których możesz użyć do przyspieszenia rozwoju frontendu Next.js.
Biblioteki po stronie klienta zapewniają różnorodne funkcje gotowe do użycia w środowisku produkcyjnym i gotowe komponenty, które mogą pomóc w szybszym i wydajniejszym tworzeniu lepszych aplikacji front-end.