Лучший способ обработки данных вашей формы при использовании Material-UI
В предыдущей статье я показал вам, как создать базовую страницу регистрации с помощью React и Material-UI. В этой статье мы использовали управляемые компоненты и ловушку useState для отслеживания входных значений формы. Вы можете ознакомиться с этой статьей ниже.
В другой статье мы рассмотрели библиотеку под названием React Hook Form. Мы узнали простой способ обработки входных данных в базовой форме с помощью библиотеки.
В этой статье мы объединим наши знания о двух. Мы будем использовать React Hook Form для обработки данных для формы, которая использует компоненты Material-UI. Это делается немного иначе, чем при использовании обычных HTML-тегов <input>.
Эта статья выходит в идеальное время, поскольку только что была выпущена 7-я версия React Hook Form. Посетите их сайт здесь.
Краткое резюме
Если вы пропустили предыдущую статью, давайте подведем итоги. Мы создали базовую страницу регистрации с использованием Material-UI, которая выглядит следующим образом. Эта форма использует компоненты TextField и Button из Material-UI.
В настоящее время мы обрабатываем входные данные формы как управляемый ввод с помощью хука useState от React. Вот пример поля ввода «Имя».
В компоненте TextField мы устанавливаем значение как значение firstName, и мы обновляем значение с помощью свойства onChange.
const [firstName, setFirstName] = useState('');
<TextField
label="First Name"
variant="filled"
required
value={firstName}
onChange={e => setFirstName(e.target.value)}
/>
Использование формы React Hook
Вместо этого мы можем использовать компонент-оболочку Controller для интеграции React Hook Form с компонентами Material-UI.
Форма React Hook описывается как «Эффективные, гибкие и расширяемые формы с простой в использовании проверкой».
Давайте сначала установим библиотеку в наш проект.
npm install react-hook-form
Нам нужно будет импортировать ловушку useForm и компонент Controller из библиотеки.
import { useForm, Controller } from "react-hook-form";
Из хука useForm нам нужно будет получить объекты handleSubmit и control.
const { handleSubmit, control } = useForm();
Компонент контроллера
Компонент Контроллер - это компонент-оболочка, который упрощает использование React Hook Form с Material-UI. В качестве примера создадим поле ввода Имя.
Компонент Controller принимает имя, элемент управления, значение по умолчанию, правила и свойства рендеринга.
<Controller
name="First Name"
control={control}
defaultValue=""
rules={{ required: 'First name required' }}
// render to be explained in next section
/>
name - это будет имя ввода, которое будет использоваться при отправке формы.
control - мы передадим объект управления, который мы получили от хука useForm. Это зарегистрирует этот ввод для использования с формой React Hook.
defaultValue - используется как значение по умолчанию для ввода формы.
rules - объект, в котором мы можем указать правила проверки для ввода. Вы можете увидеть список правил, которые вы можете применить здесь. Например, мы можем сделать ввод обязательным и установить сообщение об ошибке, используя rules={{ required: 'First name required ' }}.
Рендеринг опоры
Последняя опора, которую мы добавим, - это опора рендеринга. Это опора, которая принимает функцию, возвращающую элемент React.
В опоре рендеринга мы получим свойства onChange и value из объекта field. Затем мы добавим компонент TextField из Material-UI в качестве возвращаемого значения.
В компоненте TextField мы можем добавить обычные реквизиты, как обычно. В нашем примере добавим label="First Name" и variant="filled". Для свойств value и onChange мы передадим объекты, полученные из свойства field.
Первое вводимое имя будет выглядеть примерно так.
<Controller
name="firstName"
control={control}
defaultValue=""
rules={{ required: 'First name required' }}
render={({ field: { onChange, value } }) => (
<TextField
label="First Name"
variant="filled"
value={value}
onChange={onChange}
/>
)}
/>
Добавление проверки
Мы всегда хотим, чтобы наши формы проверялись на стороне клиента.
В функции рендеринга мы также можем получить опору error от объекта fieldState. Этот объект ошибки будет специфическим для входных данных и будет взят из свойства rules, которое мы написали ранее.
Чтобы наша форма выглядела хорошо, мы можем интегрировать некоторые свойства из компонента TextField.
Во-первых, мы добавим опору ошибки. Это свойство должно быть логическим значением, поэтому мы можем использовать error={!!error}, чтобы вернуть истину или ложь в зависимости от того, имеет ли ошибка значение.
Затем мы добавим сообщение об ошибке проверки в качестве вспомогательного текста к компоненту, например, helperText={error ? error.message : null}.
Теперь, если мы попытаемся отправить нашу форму без имени, мы увидим следующую ошибку.
Завершение формы
Чтобы завершить нашу форму, мы можем сделать то же самое для ввода фамилии, адреса электронной почты и пароля. Во вводе электронной почты мы также можем добавить type="email" в качестве опоры к компоненту TextField, чтобы добавить еще один уровень проверки. Во вводе пароля мы можем добавить type="password", чтобы скрыть символы.
Обработка события отправки выполняется так же, как и в предыдущей статье. Все, что вам нужно сделать, это создать функцию onSubmit, которая получает данные из входов, в которые мы добавили контрольное значение. Затем добавьте onSubmit слушателя в форму и используйте функцию handleSubmit из React Hook Form и передайте функцию onSubmit в качестве аргумента.
В нашем примере мы просто запишем данные формы в консоль.
Заключение
Окончательный файл Form.js будет выглядеть примерно так.
Спасибо за прочтение! Если вы хотите ознакомиться с полным исходным кодом этого проекта, посетите репозиторий GitHub здесь. Обязательно посмотрите ветку response-hook-form, чтобы увидеть код для этой статьи.
