Приведите свои формы в порядок с помощью этой комбинации функциональных и дизайнерских библиотек.

Material UI (MUI) — это популярная библиотека компонентов, реализующая систему Material Design от Google. Он предоставляет широкий спектр готовых компонентов пользовательского интерфейса, которые можно использовать для создания функциональных и визуально привлекательных интерфейсов.

Несмотря на то, что он разработан для React, вы можете расширить его возможности на другие платформы в экосистеме React, например Next.js.

Начало работы с формой React Hook и пользовательским интерфейсом Material

Форма React Hook — популярная библиотека, предоставляющая простой и декларативный способ создания, управления и проверки форм.

Интегрируя Материалы пользовательского интерфейса Благодаря компонентам и стилям пользовательского интерфейса вы можете создавать красивые формы, простые в использовании, и применять единообразный дизайн к своему приложению 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 предоставляет множество служебных функций, включая использовать форму крюк.

Этот хук упрощает процесс обработки состояния формы, проверки ввода и отправки, упрощая фундаментальные аспекты управления формой.

Чтобы создать форму, использующую этот хук, добавьте следующий код в новый файл: источник/компоненты/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 предоставляет набор готовых к использованию компонентов пользовательского интерфейса, которые можно дополнительно настроить, передав реквизиты стиля.

Тем не менее, если вам нужна большая гибкость и контроль над дизайном пользовательского интерфейса, вы можете использовать метод styled для стилизации элементов пользовательского интерфейса с помощью свойств 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>
 </>
 );
}

Наконец, импортируйте этот компонент в свой приложение/page.js файл. Удалите весь шаблонный код Next.js и обновите его следующим образом:

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



 </main>
 )
}

Запустите сервер разработки, и вы увидите в браузере базовую форму с двумя полями ввода и кнопкой отправки.

Обработка проверки формы

Форма выглядит великолепно, но пока ничего не делает. Чтобы сделать его функциональным, вам нужно добавить код проверки. использовать форму служебные функции перехватчика пригодятся при управлении и проверка вводимых пользователем данных.

Сначала определите следующую переменную состояния для управления текущим статусом формы в зависимости от того, предоставил ли пользователь правильные учетные данные. Добавьте этот код внутрь функционального компонента:

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

Ценность формастатус Переменная состояния важна, поскольку она будет определять, как вы будете предоставлять обратную связь пользователю. Если пользователь вводит правильные учетные данные, вы можете отобразить сообщение об успехе. Если в вашем приложении Next.js есть другие страницы, вы можете перенаправить их на другую страницу.

Вам также следует предоставить соответствующую обратную связь, если учетные данные неверны. Пользовательский интерфейс Material предлагает отличный компонент обратной связи, который вы можете использовать вместе с Техника условного рендеринга React для информирования пользователя на основе значения formStatus.

Для этого добавьте следующий код прямо под Стилизованная форма открывающий тег.

{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.

Клиентские библиотеки предоставляют множество готовых к использованию функций и предварительно созданных компонентов, которые помогут вам быстрее и эффективнее создавать лучшие интерфейсные приложения.