Uporządkuj swoje formularze dzięki połączeniu bibliotek funkcjonalnych i projektowych.

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.

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 plik najnowsza wersja Next.js korzystająca z katalogu aplikacji.

instagram viewer 
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 użyjFormularza hak.

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:

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

Na koniec zaimportuj ten komponent do swojego app/page.js plik. Usuń cały standardowy kod Next.js i zaktualizuj go za pomocą następujących elementów:

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



 </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. użyjFormularza funkcje narzędziowe hook przydadzą się podczas zarządzania i sprawdzanie danych wejściowych użytkownika.

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ść stan formularza Zmienna stanu jest ważna, ponieważ określa, w jaki sposób przekazujesz informację zwrotną użytkownikowi. 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 opinii, którego możesz używać razem z nim Technika renderowania warunkowego w React aby poinformować użytkownika na podstawie wartości formStatus.

Aby to zrobić, dodaj następujący kod tuż pod plikiem Stylizowany formularz otwierający znacznik.

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

Teraz, aby przechwycić i zweryfikować dane wejściowe użytkownika, możesz użyć metody rejestr funkcja rejestrująca pola wejściowe formularza, śledząca ich wartości i określająca reguły walidacji.

Ta funkcja pobiera kilka argumentów, w tym nazwę pola wejściowego i obiekt parametrów walidacji. Obiekt ten określa reguły 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 nazwie użytkownika Stylizowane pole tekstowe część.

{...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 pliku hasłoStylizowane pole tekstowe część.

{...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 && <Alertseverity="error">{errors.username.message}Alert>}

Na koniec umieść podobny kod tuż pod polem tekstowym wprowadzania hasła:

{errors.password && <Alertseverity="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.