Подредете формулярите си с тази комбинация от функционални и дизайнерски библиотеки.

Material UI (MUI) е популярна библиотека с компоненти, която внедрява системата Material Design на Google. Той предоставя широк набор от предварително изградени UI компоненти, които можете да използвате, за да създадете функционални и визуално привлекателни интерфейси.

Въпреки че е проектиран за React, можете да разширите възможностите му към други рамки в екосистемата на React, като Next.js.

Първи стъпки с формата на React Hook и потребителския интерфейс на материала

React Hook форма е популярна библиотека, която предоставя прост и декларативен начин за създаване, управление и валидиране на формуляри.

Чрез интегриране Материален потребителски интерфейс UI компоненти и стилове, можете да създавате добре изглеждащи форми, които са лесни за използване, и да приложите последователен дизайн към вашето приложение Next.js.

За да започнете, изградете проект на Next.js локално. За целите на това ръководство инсталирайте най-новата версия на Next.js, която използва директорията на приложението.

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

След това инсталирайте тези пакети във вашия проект:

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

Ето преглед на това, което ще изградите:

Можете да намерите кода на този проект тук GitHub хранилище.

Създаване и стилизиране на формуляри

React Hook Form предоставя различни помощни функции, включително useForm кука.

Тази кука рационализира процеса на обработка на състоянието на формуляра, валидиране на въвеждане и изпращане, опростявайки основните аспекти на управлението на формуляра.

За да създадете формуляр, който използва тази кука, добавете следния код към нов файл, src/components/form.js.

Първо добавете необходимите импортирания за пакетите React Hook Form и 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 предоставя колекция от готови за използване компоненти на потребителския интерфейс, които можете допълнително да персонализирате чрез предаване на подпорки за стилизиране.

Независимо от това, ако искате повече гъвкавост и контрол върху дизайна на потребителския интерфейс, можете да изберете да използвате стилизирания метод, за да стилизирате вашите елементи на потребителския интерфейс със свойства на CSS. В този случай можете да стилизирате основните компоненти на формуляра: основния контейнер, самия формуляр и полетата за въвеждане на текст.

Точно под импортирания добавете този код:

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

Поддържането на модулна кодова база е важно при разработката. Поради тази причина, вместо да събирате целия код в един файл, трябва да дефинирате и стилизирате потребителски компоненти в отделни файлове.

По този начин можете лесно да импортирате и използвате тези компоненти в различни части на вашето приложение, правейки кода си по-организиран и поддържаем.

Сега дефинирайте функционалния компонент:

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

И накрая, импортирайте този компонент във вашия app/page.js файл. Изтрийте целия шаблонен код Next.js и го актуализирайте със следното:

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



 </main>
 )
}

Стартирайте сървъра за разработка и трябва да видите основен формуляр с две полета за въвеждане и бутон за изпращане във вашия браузър.

Обработка на валидиране на формуляр

Формата изглежда страхотно, но все още не прави нищо. За да го направите функционален, трябва да добавите код за валидиране. useForm помощните функции на куката ще бъдат полезни при управлението и валидиране на въведените от потребителя данни.

Първо, дефинирайте следната променлива на състоянието, за да управлявате текущото състояние на формуляра, в зависимост от това дали потребителят е предоставил правилните идентификационни данни. Добавете този код във функционалния компонент:

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

След това създайте манипулираща функция за валидиране на идентификационните данни. Тази функция ще симулира HTTP API заявка, която обикновено се появява, когато клиентските приложения взаимодействат с API за удостоверяване на бекенда.

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

Добавете функция за манипулиране на събитие onClick към компонента на бутона – като го предадете като проп – за да задействате функцията onSubmit, когато потребител щракне върху бутона за изпращане.

onClick={handleSubmit(onSubmit)}

Стойността на formStatus променливата на състоянието е важна, защото ще определи как предоставяте обратна връзка на потребителя. Ако потребителят въведе правилните идентификационни данни, може да покажете съобщение за успех. Ако сте имали други страници във вашето приложение Next.js, можете да ги пренасочите към друга страница.

Трябва също така да предоставите подходяща обратна връзка, ако идентификационните данни са грешни. Material UI предлага страхотен компонент за обратна връзка, който можете да използвате заедно Техниката на React за условно изобразяване за информиране на потребителя въз основа на стойността на formStatus.

За да направите това, добавете следния код точно под StyledForm отварящ етикет.

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

Сега, за да заснемете и потвърдите въведеното от потребителя, можете да използвате регистрирам функция за регистриране на полетата за въвеждане на формуляра, проследяване на стойностите му и указване на правилата за валидиране.

Тази функция приема няколко аргумента, включително името на полето за въвеждане и обект на параметри за валидиране. Този обект определя правилата за валидиране на полето за въвеждане, като например конкретния модел и минималната дължина.

Продължете и включете следния код като опора в потребителското име 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'
 },
})}

Сега добавете следния обект като опора в паролаStyledTextField компонент.

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

Добавете следния код под полето за въвеждане на потребителско име, за да предоставите визуална обратна връзка относно изискванията за въвеждане.

Този код ще задейства предупреждение със съобщение за грешка, за да информира потребителя за изискванията, за да се увери, че коригира всички грешки, преди да изпрати формуляра.

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

И накрая, включете подобен код точно под текстовото поле за въвеждане на парола:

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

Страхотно! С тези промени трябва да имате визуално привлекателна, функционална форма, направена с React Hook Form и Material UI.

Подобрете разработката на Next.js с библиотеки от страна на клиента

Material UI и React Hook Form са само два примера от многото страхотни библиотеки от страна на клиента, които можете да използвате, за да ускорите разработката на интерфейса на Next.js.

Библиотеките от страна на клиента предоставят разнообразие от готови за производство функции и предварително изградени компоненти, които могат да ви помогнат да изградите по-добри приложения отпред по-бързо и по-ефективно.