Интерфейс Chakra и React-Hook-Form – как создавать красивые формы

1656044537 interfejs chakra i react hook form – kak sozdavat krasivye formy

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

Если вы недавно прошли курс React, вам, вероятно, не понравилась эта часть, потому что есть много состояний, которыми можно управлять, если у вас есть несколько полей ввода.

Во-первых, вы отслеживаете состояние поля ввода с помощью onChange свойство, которое вызывает useState() функция. Поля ввода вращаются вокруг элемента формы.

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

Затем следует проверка, которая проверяет, ввел ли пользователь какие-либо данные. Если нет, вернется ошибка, которая предложит пользователю ввести правильный вход.

Логика здесь целый ряд шаблонов. Вам может быть скучно просто слышать о процессе.

Что, если я скажу вам, что одна библиотека может добиться всего этого?

Вот что я расскажу в этой статье:

  1. Что такое React-Hook-Form?
  2. Как React-Hook-Form влияет на производительность
  3. Как получить пользовательские данные
  4. Как добавить проверку в ваши формы
  5. Как улучшить интерфейс и пользовательский опыт с помощью Chakra-UI

Что такое React-Hook-Form?

React-Hook-Form — это гибкая библиотека, которая занимается всеми вашими проверками, управлением состоянием и данными пользователя — и все это упаковано в размере 25,3 Кб (распакованный) и 9,1 Кб GZip (изменения с версиями).

Он прост и ясен в использовании, и вам нужно написать минимальный код.

Размер пакета по bundlephobia.com
Источник изображения

Одной из особенностей, которыми я поражен, является его производительность. Как отмечается на его официальном сайте, React-Hook-Form:

«Сводит к минимуму количество повторных визуализации и быстрее монтировать, стремясь обеспечить лучший опыт пользователя».

Как React-Hook-Form влияет на производительность

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

<input type=”password” placeholder=”Password” ref={register} />

Таким образом, React-Hook-Form использует метод неконтролируемый ввод, а не изменять состояние каждый раз. Он изолирует выбранный компонент и избегает воспроизведения дочерних компонентов.

Это значительно уменьшает количество повторных визуализации и повышает общую производительность программы. (источник)

Как получить данные пользователя из формы

Я создал Codesandbox для этого конкретного учебника, поэтому обязательно обратитесь к нему на случай, если заблудитесь.

Вот чего вам нужно будет придерживаться:

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

Демонстрация того, что мы будем строить

Сначала установим библиотеку:

npm install react-hook-form

Теперь импортируйте useForm крючок из упаковки:

import { useForm } from "react-hook-form";

Разрушьте следующие константы из useForm крючок:

const { register, handleSubmit, formState: { errors } } = useForm();

Создайте простой элемент формы, например:

<form onSubmit={handleSubmit(onSubmit)}>
	<input type=”text” placeholder=”First Name” {...register(“firstname”)} />
	<input type=”submit” />
</form>

После отправки форма передаст функцию функции handleSubmit. Мы можем определить onSubmit функция так:

const onSubmit = data => console.log(data);

Теперь, если мы испытаем наш элемент формы, после его отправки консоль вернет следующее:

Предварительный просмотр журнала консоли Codesandbox

Похоже, он вернул объект со свойством firstname и успешно получил данные в поле ввода.

Теперь давайте добавим еще кучу полей ввода:

<form onSubmit={handleSubmit(onSubmit)}>
	<input type=”text” placeholder=”First Name” {...register(“firstname”)} />
	<input type=”text” placeholder=”Last Name” {...register(“lastname”)} />
	<input type=”password” placeholder=”Your password” {...register(“password”)} />
	<input type=”submit” />
</form>

После регистрации ответа мы получаем объект назад:

Поверхность-Pro-3---1

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

const [data, setData] = useState();
const onSubmit = (data) => {
   setData(data);
 };

Давайте создадим новый компонент под названием Stats.js. Здесь мы воспользуемся интерфейсом Chakra UI Stat компонент.

import {
 HStack,
 Stack,
 Stat,
 StatHelpText,
 StatLabel
} from "@chakra-ui/react";
import React from "react";
 
export default function Stats(props) {
 return (
   <Stat mt={5}>
     <Stack
       p={4}
       borderWidth="3px"
       borderRadius="md"
       direction="column"
       align="flex-start"
     >
       <HStack>
         <StatLabel>Name: {props.Firstname}</StatLabel>
         <StatLabel>{props.Lastname}</StatLabel>
       </HStack>
       <StatHelpText>Password: {props.Password}</StatHelpText>
     </Stack>
   </Stat>
 );
}

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

import Stats from "./Stats";
// App.js
{data && (
       <Stats
         Firstname={data.firstname}
         Lastname={data.lastname}
         Password={data.password}
       />
)}

Статистика будет отображаться, только если данные есть true.

Конечный результат должен выглядеть примерно так:

Результат отображается в интерфейсе

Как добавить проверку в форму

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

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

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

Сделаем некоторые выводы из этого примера

  • Мы хотим получить действительные данные
  • Мы хотим, чтобы наши пользовательские данные были защищены путем ввода надежных паролей
  • Мы хотим, чтобы база данных была чистой, блокируя недействительные данные

Мы попытаемся достичь этих целей с помощью проверки на стороне клиента, предоставленной React-Hook-Form. Мы будем использовать register метод, предоставленный библиотекой. Он позволяет регистрировать данные, вводимые пользователем, и применять к ним правила проверки.

Рассмотрим пример ниже:

<input
      type="text"
      placeholder="First name"
      {...register("firstname", { required: true })}
/>

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

<input
      type="text"
      placeholder="First name"
      {...register("firstname", { required: “Please enter your first name” })}
/>
{errors.firstname && <p>{errors.firstname.message}</p>}

Если объект errors возвращает истинное значение, он отобразит сообщение пользователю.

Давайте теперь заставим пользователя ввести пароль, содержащий более 8 символов.

<Input
      type="password"
      placeholder="Password"
      {...register("password", {
        required: "Please enter Password",
        minLength: { value: 8, message: "Too short" }
      })}
 />

Назначив свойства minLength значению 8, пользователь теперь будет вынужден ввести пароль из 8 символов.

Кроме того, мы можем известить пользователя в интерфейсе, используя тот же метод, который мы использовали ранее And operator.

{errors.password && <p>{errors.password.message}</p>}

Если вы заметили сейчас, React-Hook-Form динамически слушает изменения. Следовательно, если вход оставить пустым, он одновременно отображает уведомление. Если пароль слишком короткий, сообщение обновляется динамически. красота!

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

Как улучшить интерфейс и пользовательский опыт с помощью Chakra-UI

Прежде всего, давайте превратим все компоненты, которые мы использовали до сих пор в компоненты интерфейса Chakra.

Вместо нормального <input />просто замените существующий на Input от Chakra UI.

Import { Input } from “@chakra-ui/react”

Теперь импортируйте VStack и Button компонент так же и оберните всю форму VStack.

<VStack>
         <Input
           type="text"
           placeholder="First name"
           {...register("firstname", {
             required: "Please enter first name",
             minLength: 3,
             maxLength: 80
           })}
         />
         <Input
           type="text"
           placeholder="Last name"
           {...register("lastname", {
             required: "Please enter Last name",
             minLength: 3,
             maxLength: 100
           })}
         />
         <Input
           type="password"
           placeholder="Password"
           {...register("password", {
             required: "Please enter Password",
             minLength: { value: 8, message: "Too short" }
           })}
         />
         <Button
           borderRadius="md"
           bg="cyan.600"
           _hover={{ bg: "cyan.200" }}
           variant="ghost"
           type="submit"
         >
           Submit
         </Button>
</VStack>

Реквизит, который вы видите для Button компонент похож на свойства CSS, поэтому переход к интерфейсу Chakra не будет проблемой.

Теперь давайте дадим быстрые оповещения пользователям, когда они вводят какие-либо недействительные данные.

Сделайте новый компонент AlertPop.js.

Импортируйте следующий код:

import { Alert, AlertIcon, AlertTitle } from "@chakra-ui/react";

Определим параметр для отображения сообщения об ошибке.

export default function AlertPop (props) {
 return (
   <Alert status="error">
     <AlertIcon />
     <AlertTitle mr={2}>{props.title}</AlertTitle>
   </Alert>
 );
}

Теперь импортируйте этот компонент в корневой файл и под каждым полем ввода введите следующую логику:

{errors.firstname && <AlertPop title={errors.firstname.message} />}
{errors.lastname && <AlertPop title={errors.lastname.message} />}
{errors.password && <AlertPop title={errors.password.message} />}

Наконец-то импортируйте useToast нравится это:

import { useToast } from "@chakra-ui/react"

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

Вот как мы это будем выполнять:

Import { useToast } from “@chakra-ui/react”

const toast = useToast( )
const onSubmit = (data) => {
   //console.log(data);
   toast({
     title: "Submitted!",
     status: "success",
     duration: 3000,
     isClosable: true
   });
 
   setData(data);
 };

Конечный результат должен выглядеть примерно так:

Компонент тоста в действии

Вывод

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

К примеру, вы просто не можете начать изучать ReactJS вдруг, не понимая манипуляции DOM. Основы являются основой, иначе вы не сможете понять красоту того, как работает Интернет.

Спасибо, что читаете!✨

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

Я говорю о веб-технологиях и проектах сборки, дополнительно документирую процесс разработки для других разработчиков. Если вам нужна какая-либо рекомендация, обязательно напишите мне в Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован.