Рубрики
Без рубрики

Ищете лучшую библиотеку React Form в 2021 году? Это, вероятно, в этом списке

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

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

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

Formik

Formik является одним из популярных библиотек (с 26,2 тыс. Звезды на GitHub) для форм строительства в реакции. Formik поможет вам с управлением состоянием формы, передачу, форматированию и проверке значений формы. Это также довольно мало по размеру. Это 13,1 КБ При gzaked и Minified, при поддержке TypeyScript и работает с реактивными натуральными.

Вот как вы бы написали форму, чтобы собрать пользовательские данные с Formik:

import { Formik, Form, Field, ErrorMessage } from "formik";

const DataForm = () => (
  <>
    
Your Data

     {
        const errors = {};
        if (!values.name) {
          errors.name = "Required";
        }

        if (!values.acceptedTerms) {
          errors.acceptedTerms =
            "You must accept the terms and conditions before you proceed.";
        }

        if (!values.email) {
          errors.email = "Required";
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = "Invalid email address";
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        // post data to server
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }}
    >
      {({ isSubmitting, dirty, handleReset }) => (
        

          

            
            
          

          

            
            
            
          

          

            
            
            
          

          
          
        

      )}
    
  
);

export default DataForm;

Formik поставляется с компонентами, которые облегчают управление состоянием формы, а затем предоставляют данные формы через реквизиты. Вы оберните форму с Компонент и пропустите его реквизиты. В примере я прошел в опоре для InitivalValues , который является объектом с ключами, которые соответствуют название или ID Из полей его следует связываться и значения для полей, когда они отображаются.

OnsUbmit PROP – это функция, которая будет называться, когда форма отправляется, и значения формы действительны. Если форма недействительна, то сообщения об ошибках будут отображаться для каждого поля, используя компонент. Я предпочитаю использовать по сравнению с проверкой состояния ошибки и если поле было посещено. То есть писать вместо {ошибки .email && коснулись .email && ошибки .email} Отказ

Вы можете использовать проверку на уровне поля или валидацию уровня формы, указав проверить реквизит для <Поле/> или Отказ Вы указываете синхронную или асинхронную функцию, которая возвращает сообщение об ошибке для проверки уровня поля, или объект с ключами, которые соответствуют соответствующим полям для проверки уровня формы. Вы можете использовать библиотеки, как YUP или Джой Если вы не хотите писать свою собственную функцию проверки. У Formik есть специальный опора для YUP называется Validationschema который автоматически автоматически преобразует ошибки проверки YUP в симпатичный объект, клавиши которых соответствуют соответствующим полям формы.

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

Мне нравится, насколько легко можно использовать <Поле/> и , но вы также можете использовать элементы управления HTML-формы или пройти пользовательский компонент для <Поле/> Отказ У вас также есть доступ к обработчикам событий, значения формы и статус проверки в качестве реквизита.

Форма кендореакции

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

import { useCallback } from "react";
import { Form, Field, FormElement } from "@progress/kendo-react-form";

const emailRegex = new RegExp(/\S+@\S+\.\S+/);
const emailValidator = (value) =>
  emailRegex.test(value) ? "" : "Please enter a valid email.";

const CustomCheckbox = (fieldRenderProps) => {
  const {
    validationMessage,
    visited,
    value,
    onChange,
    onFocus,
    onBlur,
    ...props
  } = fieldRenderProps;

  const onValueChange = useCallback(() => {
    onChange({ value: !value });
  }, [onChange, value]);

  return (
    

      
      
      {visited && validationMessage && {validationMessage}}
    

  );
};

const checkboxValidator = (value) =>
  value ? "" : "You must accept the terms and conditions before you proceed.";

const DataForm = () => {
  const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
  return (
    
 ({
        name: name ? "" : "Your name is required",
        email: emailValidator(email),
        acceptedTerms: checkboxValidator(acceptedTerms),
      })}
      render={(formRenderProps) => (
        
          

            Your Data
            

              
              
              {formRenderProps.touched && formRenderProps.errors.name && (
                {formRenderProps.errors.name}
              )}
            


            

              
              
              {formRenderProps.touched && formRenderProps.errors.email && (
                {formRenderProps.errors.email}
              )}
            

            
          

          

            
            
          

        
      )}
    />
  );
};

export default DataForm;

Синтаксис прост в работе с. Вы проходите несколько реквизитов к

компонент. В примере я установил InitivalValues , OnsUbmit опоры для обработки представления формы и Валидатор для валидации уровня формы. Если вы решите использовать проверку на уровне поля, вы можете пройти Валидатор реквизит к <Поле/> Отказ <Поле/> Компонент использует имя SPOP для хранения значения для ввода и может сделать пользовательский компонент или элемент HTML, такой как Вход . В отличие от Formik, где вы можете указать Тип опоры и опускают Компонент И это сделает <ввод/> , Kendoreace требует, чтобы вы проходили значение для Компонент Отказ

Вы получаете доступ к форме формы и обработчикам событий как реквизиты. В примере я использовал onformreset Чтобы сбросить форму, когда Сброс Кнопка нажала, а Prossubmit знать, когда отключить Отправить кнопка. Вы также получаете доступ к Ошибки Объект, который содержит сообщение для каждого поля, которое не удалось проверить.

Использование формы KendoReact требует платной лицензии. Получение лицензии KENDOREACT дает вам доступ к набору компонентов для создания богатых, доступных веб-приложений, с быстрой технической поддержкой. Вы получаете разные компоненты для отображения данных (E.G. GRID), образуют входные компоненты, такие как флажок, выпадающий и разные компоненты ввода данных.

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

import { useState } from "react";
import { Label, Error } from "@progress/kendo-react-labels";
import { Input } from "@progress/kendo-react-inputs";
import { FormElement } from "@progress/kendo-react-form";

const App = () => {
  const [value, setValue] = useState();
  const editorId = "firstName";
  return (
    
      
       setValue(e.value)}
      />
      {!value && This field is required.}
    
  );
};

Документация к области Kendoreact хорошо детализирована и включает Руководство по проектированию формы При создании и стиле форм с поддержкой доступности.

Форма реагирования крюка

Форма реагирования крюка Гибкая библиотека, которая охватывает крючки API и неконтролируемые компоненты. Это открытый источник и имеет 17,3 к звездам GitHub, и это 9,1 кб когда gzaked и министерство.

API немного отличается от других упомянутых. Он имеет Typlectscript и реагировать нативную поддержку, но в отличие от других, которые я упомянул, нет компонента для обертывания вашей формы. Вы будете использовать Useform Крюк обеспечивает доступу к состоянию формы. Давайте посмотрим на пример.

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

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

  const onSubmit = (data) => alert(JSON.stringify(data, null, 2));

  return (
    

      
 Your Data

      

        
        
        {errors.name?.message}
      

      

        
        
        {errors.email?.message}
      

      

        
        
        {errors.acceptedTerms && You must accepet the terms}
      


      
      
    

  );
}

Чтобы использовать эту библиотеку, вы называете Useform () Крючок, который вернет объекты и функции для управления состоянием формы. Handlesubmit Функция будет вызвана, когда форма отправляется. Он принимает две функции в качестве аргументов: первый будет вызываться с данными формы, если проверка формы будет успешной, а второй будет вызываться, когда проверка не удалась.

Регистрация Функция позволяет регистрировать правила проверки элементов ввода/выбора. Вы можете указать сообщение об ошибке для правила проверки, когда он определяется или пропустит его. Вы можете увидеть другой подход в правило, примененном к электронное письмо и Принимаеттеры Вход. Если вы укажете сообщение об ошибке, вы можете получить доступ к нему в объекте ошибок через сообщение Собственность подтвержденного поля. Если вы хотите использовать компонент, чтобы сделать сообщение об ошибке, как будто вы видели с Forfik, вы можете установить @ Cookform/Ошибка - сообщение упаковка. С этим вы можете использовать его для отображения сообщения об ошибке для имени и электронной почты следующим образом:

import { ErrorMessage } from "@hookform/error-message";
// other necessary code ...


 
{message}
}
/>

Окончательная форма реагирования

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

Давайте посмотрим на синтаксис для использования окончательной формы.

import { Form, Field } from "react-final-form";

const DataForm = () => (
  <>
    
Your Data

    
 alert(JSON.stringify(values, 0, 2))}
      initialValues={{ acceptedTerms: true }}
      validate={(values) => {
        const errors = {};
        if (!values.name) {
          errors.name = "Required";
        }

        if (!values.acceptedTerms) {
          errors.acceptedTerms =
            "You must accept the terms and conditions before you proceed.";
        }

        if (!values.email) {
          errors.email = "Required";
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = "Invalid email address";
        }
        return errors;
      }}
      render={({
        handleSubmit,
        form,
        submitting,
        pristine,
        values,
        errors,
        touched,
      }) => (
        
          
            {({ input, meta }) => (
              

                
                
                {meta.error && meta.touched && {meta.error}}
              

            )}
          
          

            
            
          

          
            {({ input, meta }) => (
              

                
                
                {meta.error && meta.touched && {meta.error}}
              

            )}
          
          

            
            
            {touched.acceptedTerms && errors.acceptedTerms && (
              {errors.acceptedTerms}
            )}
          

          

            
            
          

        

      )}
    />
  
);

export default DataForm;

Две компоненты от реактивной формы, используемой в примере, являются

и <Поле/> Отказ
Компонент представляет собой обертку над HTML-формой, и она управляет состоянием и событиями формы. Вы можете установить начальные значения для использования для инициализации состояния формы, обработчика отправки и проверить опоры для проверки уровня формы. Вы также можете сделать проверку на уровне полевых условий, передавая проверить реквизит к <Поле/> компонент.

Вы получаете доступ к рендеровке, как ценности какие данные формы, Handlesubmit. , коснулся и Ошибки Отказ <Поле/> Компонент регистрирует поле с формой, подписывается в полевое состояние и вводит как полевые состояния, так и функции обратного вызова (onblur, Onchange и Onfocus) через рендеринг. Я использовал функцию рендеринга ребенка, чтобы сделать метку с соответствующим входным сообщением и сообщением об ошибке для имени и поля электронной почты.

В отличие от формы Forficik и React Cook, у него нет компонент. Тем не менее, вы можете легко построить тот, который можно повторно использовать в вашем проекте, используя Использование крюк.

import { useField } from "react-final-form";

const ErrorMessage = ({ name }) => {
  const {
    meta: { error, touched },
  } = useField(name, { subscription: { error: true, touched: true } });
  return error && touched ? {error} : null;
};

Окончательная форма RACT в основном поддерживается Эрик Расмуссен , который также построил форму Redux. Окончательная форма RACT – это эволюция уроков, которые он узнал при использовании и поддержании формы Redux, а также обратной связи от сообщества. Это открытый источник и имеет 6,3 к звездам GitHub, весом 3.2. КБ При gzaked и модифицированном, плюс 5,4 кб Gzipped для окончательной формы.

Вывод

Любой из перечисленных библиотек RACT Form является быстрым и помогает создавать и управлять сложными формами, которые являются исполнительными. Форма Formik, KendoReact и React Final Form предоставляет компоненты для вас работать, в то время как форма React Cloks использует крюки и неконтролируемые входы. Я не в пользу стиля/синтаксиса, используемого в формы React Cook Но если вам нравится этот подход, то используйте его.

Я предпочел бы пойти на последнюю форму реагирования или форму KendoReact. Мне больше нравится синтаксис И я также могу построить компонент при необходимости. Для меня это требует меньшего кода при работе с оперативной формой по сравнению с другими.

Для кендореакционной формы, единственный недостаток, который я думаю, что это не бесплатно, в отличие от других. Тем не менее, получение лицензии на весь Библиотека KendoReact Дает вам доступ к множеству прохладных компонентов для создания богатых, исполнительных и доступных приложений. Есть хорошая тема/стиль, с которой вы можете сделать с ним, и все ваши компоненты имеют одинаковый вид и чувствовать. Вы получаете разные входные компоненты, и все они хорошо работают вместе с пакетом формы для доступных реагированных форм. Все, что хорошо документировано в их Форма рекомендаций , который также является полезным, даже если вы не используете формы Kendoreact.

Как я уже сказал, любая из этих библиотек – это хороший выбор, если он соответствует вашим потребностям.

Оригинал: “https://dev.to/pmbanugo/looking-for-the-best-react-form-library-in-2021-it-s-probably-on-this-list-e2h”

Читайте ещё по теме: