Как строить формы в реакцию с библиотекой AGED-FORM

Автор оригинала: Yogesh Chavan.

В этой статье мы рассмотрим РЕАКТ-КРЮК-ФОРМЫ библиотека.

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

Давайте начнем

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

Посмотрите на следующий код:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState({
    email: "",
    password: ""
  });

  const handleInputChange = (event) => {
    setState((prevProps) => ({
      ...prevProps,
      [event.target.name]: event.target.value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(state);
  };

  return (
    

      

        

          Email
          
        
        

          Password
          
        
        

          
          Login
        
      
    
  );
}

Вот код Sandbox Demo: https://codesandox.io/s/login-form-zjxs9 Отказ

В приведенном выше коде у нас есть только 2 поля ввода, а именно Email и пароль и кнопка отправки.

Каждое поле ввода имеет ценность и Onchange обработчик добавлен, чтобы мы могли обновить состояние на основе ввода пользователя.

Кроме того, мы добавили Handlesubmit Способ, который отображает данные, введенные в форме к консоли.

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

Код станет более сложным и длительным, поскольку количество полей ввода и увеличение их валидации.

Это очень распространенное требование в любом приложении. Так что легко работать с формами, есть различные библиотеки, такие как Formik , redux-форма , Реагистрационная форма , РЕАКТ-КРЮК-ФОРМЫ и так далее.

Но тот, который набирает много популярности, это РЕАКТ-КРЮК-ФОРМЫ библиотека.

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

Создайте новый проект реагирования, запустив следующую команду из терминала:

npx create-react-app react-hook-form-demo

Как только проект создан, удалите все файлы из SRC папка и создать новый index.js и styles.csss Файлы внутри SRC папка.

Чтобы установить библиотеку формы, выполните следующую команду из терминала:

yarn add react-hook-form

Как создавать начальные страницы

Открыть SRC/index.js Файл и добавьте следующий контент внутри него:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

Открыть SRC/styles.css Файл и добавьте содержимое от здесь внутри него.

Теперь создайте новый файл App.js внутри SRC Папка со следующим содержанием:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    

      

        

          Email
          
        
        

          Password
          
        
        

          
          Login
        
      
    
  );
}

Здесь мы только что добавили поля электронной почты и пароля в форму.

Базовое создание формы с использованием реактивной крюковой формы

РЕАКТ-КРЮК-ФОРМЫ Библиотека предоставляет Useform Крючок, который мы можем использовать для работы с формами.

Импорт Useform Крюк, как это:

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

Используйте Useform Крюк, как это:

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

Здесь,

• Регистрация – это функция, которая будет использоваться в качестве REF, предоставляемой Useform крюк. Мы можем назначить его каждому поле ввода, чтобы РЕАКТ-КРЮК-ФОРМЫ Может отслеживать изменения для значения входного поля.
• handlesubmit – это функция, которую мы можем позвонить, когда форма представлена
• Ошибки будут содержать ошибки проверки, если есть

Теперь замените содержимое App.js Файл со следующим контентом:

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const { register, handleSubmit, errors } = useForm();

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

  return (
    

      

        

          Email
          
        
        

          Password
          
        
        

          
          Login
        
      
    
  );
}

В приведенном выше коде мы дали ссылку на каждое поле ввода, которое мы получили от Useform крюк.

ref={register}

Кроме того, мы добавили функцию ONSUBMIT, которая передается в функцию Handlesubmit.

Обратите внимание, что для каждого поля ввода мы дали уникальное имя, которое является обязательным так РЕАКТ-КРЮК-ФОРМЫ может отслеживать меняющиеся данные.

Когда мы отправляем форму, функция Handlesubmit будет обрабатывать представление формы. Он отправит введенные данные в функцию ONSUBMIT, которую мы входите в систему на консоль.

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

Теперь запустите приложение, запустив Пряжа начать команда.

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

Также по сравнению с кодом без РЕАКТ-КРЮК-ФОРМЫ (который мы видели в начале этой статьи), этот код намного проще. Это потому, что нам не нужно добавлять ценность и Onchange Обработчик для каждого поля ввода, и нет необходимости управлять своим заявлением.

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

Теперь давайте добавим необходимое полевую проверку поля и минимальную длину на поля ввода.

Чтобы добавить проверку, мы сможем передать его в функцию регистров, которая передается в виде Ref для каждого поля ввода, как это:

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

Когда проверка не удается, объект ошибок приходит из Useform будет заполнен полями, для которых проверка не удалась.

Открыть App.js Файл и замените его содержимое со следующим содержимым:

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const { register, handleSubmit, errors } = useForm();

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

  return (
    

      

        

          Email
          
          {errors.email && errors.email.type === "required" && (
            
Email is required.
          )}
          {errors.email && errors.email.type === "pattern" && (
            
Email is not valid.
          )}
        
        

          Password
          
          {errors.password && errors.password.type === "required" && (
            
Password is required.
          )}
          {errors.password && errors.password.type === "minLength" && (
            

              Password should be at-least 6 characters.
            
          )}
        
        

          
          Login
        
      
    
  );
}

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

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

Если проверка не удалась, то Ошибки .email Поле внутри объекта ошибок будет заполняться полем типа, которое мы использовали для отображения сообщения об ошибке.

{errors.email && errors.email.type === "required" && (
  
Email is required.
)}

Аналогичным образом, мы добавили проверку поля пароля.

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

Кроме того, форма не представлена до тех пор, пока есть ошибка проверки. Вы можете увидеть, что console.log Заявление напечатано только в том случае, если форма действительна.

Итак, используя РЕАКТ-КРЮК-ФОРМЫ Уменьшено количество кода, которое мы должны написать. Валидация также отзывчивается, поэтому, как только поле будет действительным, сообщение об ошибке уходит мгновенно.

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

Посмотрите на следующий код:

import React from 'react';
import { useForm } from 'react-hook-form';
import './styles.css';

export default function App() {
  const { register, handleSubmit, errors } = useForm();

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

  return (
    

      

        

          Email
          
          {errors.email && 
{errors.email.message}
}
        
        

          Password
          
          {errors.password && (
            
{errors.password.message}
          )}
        
        

          
          Login
        
      
    
  );
}

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

Для поля ввода электронной почты мы изменили этот предыдущий код:

на новый код:

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

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

{errors.email && 
{errors.email.message}
}

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

Обратите внимание, что если есть ошибки проверки, обработчик ONSUBMIT не будет выполнен, и соответствующее поле ввода будет автоматически сосредоточено (что это хорошо).

Как добавить пользовательский метод валидации

Вы даже можете предоставить пользовательскую проверку для поля ввода, добавив проверить метод. Это полезно, если вам нужно выполнить комплексные проверки, такие как это:

// validation function
const validatePassword = (value) => {
  if (value.length < 6) {
    return 'Password should be at-least 6 characters.';
  } else if (
    !/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[!@#$*])/.test(value)
  ) {
    return 'Password should contain at least one uppercase letter, lowercase letter, digit, and special symbol.';
  }
  return true;
};

// JSX

Теперь вы знаете, как использовать РЕАКТ-КРЮК-ФОРМЫ Создание форм в реакции наряду с комплексными валидациями.

Почему форма RACT-TOURE лучше, чем альтернативы

Давайте посмотрим на некоторые дополнительные причины, которые РЕАКТ-КРЮК-ФОРМЫ должен стать вашим предпочтительным выбором для работы с формами.

• Сложность кода меньше по сравнению с Formik , redux-форма и другие альтернативы.
• РЕАКТ-КРЮК-ФОРМЫ хорошо интегрируется с YUP Библиотека для проверки схемы, чтобы вы могли объединить свои собственные схемы проверки.
• Количество повторных рендеров в приложении мало по сравнению с альтернативами.
• Время монтажа меньше по сравнению с альтернативами.

Для фактических метрик сравнения Читать дальше здесь.

Заключение

В этой статье мы видели, как использовать РЕАКТ-КРЮК-ФОРМЫ И почему это много разработчиков предпочтительным выбором для создания простых, так и сложных форм в реакции.

Вы можете найти исходный код GitHub для этого приложения здесь Отказ

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