Как создавать красивые формы Next.js с помощью React Hooks и Material UI

Вы хотите создать красивую форму Next.JS. Тогда давайте попробуем сделать это с помощью React Hook Form и Material UI.

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

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

Инструкции по использованию React Hook Form и пользовательского интерфейса Material

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

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

Для начала создайте локальный проект Next.js. В этом примере установите последнюю версию Next.js:

npx create-next-app@latest next-project –app

Далее установите эти пакеты в проект:

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

Следующие результаты:

Создание и стилизация форм

React Hook Form предоставляет ряд служебных функций, включая хук useForm.

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

Чтобы создать форму с помощью этого хука, добавьте в новый файл следующий код: src/comComponents/form.js.

Сначала добавьте необходимый импорт для пакетов MUI и Reack Hook Form:

«использовать клиент» импортировать React, {useState} из «реагировать»; импортировать {useForm} из ‘реагировать-хука-формы’; импортировать { TextField, Button как MuiButton, Alert } из ‘@mui/material’; импортировать {стиль} из ‘@mui/system’;

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

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

Прямо под импортом добавьте следующий код:

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

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

Теперь определим функциональный компонент:

экспортировать функцию по умолчанию Form() {const {register, handleSubmit, formState: {errors} } = useForm(); вернуть (Отправить); }

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

импортировать форму из ‘src/comComponents/Form’ экспортировать функцию по умолчанию Home() { return ( ) }

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

Обрабатывает аутентификацию по форме

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

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

const (formStatus, setFormStatus) = useState({ успех: ложь, ошибка: ” });

Затем создайте функцию-обработчик для аутентификации данных для входа. Эта функция будет моделировать запросы HTTP API, которые обычно возникают, когда клиенты приложений взаимодействуют с API внутренней аутентификации.

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

onClick={handleSubmit(onSubmit)}

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

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

Для этого добавьте следующий код чуть ниже открывающего тега StyleForm.

{formStatus.success ? (Форма успешно отправлена): formStatus.error? ( {formStatus.error} ): ноль}

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

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

Включите следующий код в качестве атрибута имени пользователя, элемента StyledTextField.

{.register(‘username’, { требуется: ‘Требуется имя пользователя’, шаблон: { value: /^(a-zA-Z0-9_.-)*$/, сообщение: ‘Используются недопустимые символы’ }, minLength: { значение: 6, сообщение: «Имя пользователя должно содержать не менее 6 символов» }, })}

Теперь добавьте следующий объект в качестве свойства в элемент StyledTextField пароля.

{.register(‘пароль’, { требуется: ‘Требуется пароль’, minLength: { значение: 8, сообщение: ‘Пароль должен содержать не менее 8 символов’ }, })}

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

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

{errors.username && {errors.username.message}}

Наконец, добавьте тот же код прямо под полем ввода пароля:

{errors.password && {errors.password.message}}

Готово! Удачи!

В приведенной выше статье вы познакомились с «Как создавать красивые формы Next.js с помощью React Hooks и Material UI». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!