15.11.2024 в 07:47

Лучшие библиотеки проверки форм React

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

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

1. React Hook Form

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

Лучшая библиотека форм при создании приложения React из-за ее полезности и простоты. Она имеет много полезных инструментов и не требует много кода по сравнению с Formik и Redux Form.

import { useForm, SubmitHandler } from "react-hook-form"


type Inputs = {
  example: string
  exampleRequired: string
}

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />


      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}


      <input type="submit" />
    </form>
  )
}

2. Formik

Formik — это небольшая группа компонентов и хуков React для создания форм в React и React Native. Она помогает с тремя самыми раздражающими частями:

Получение значений в состоянии формы и из него.
Проверка и сообщения об ошибках.
Обработка отправки формы.

import React from 'react';
import { useFormik } from 'formik';

const SignupForm = () => {
  // Pass the useFormik() hook initial form values and a submit function that will
  // be called when the form is submitted
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <button type="submit">Submit</button>
    </form>
  );
};

3. React Final Form

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

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

Final Form — это высокопроизводительное решение для управления состоянием формы на основе подписки для React. Оно разработано как модульное, без зависимостей и совместимое с хуками.

import { Form, Field } from 'react-final-form'

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    validate={validate}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <h2>Simple Default Input</h2>
        <div>
          <label>First Name</label>
          <Field name="firstName" component="input" placeholder="First Name" />
        </div>

        <h2>An Arbitrary Reusable Input Component</h2>
        <div>
          <label>Interests</label>
          <Field name="interests" component={InterestPicker} />
        </div>

        <h2>Render Function</h2>
        <Field
          name="bio"
          render={({ input, meta }) => (
            <div>
              <label>Bio</label>
              <textarea {...input} />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        />

        <h2>Render Function as Children</h2>
        <Field name="phone">
          {({ input, meta }) => (
            <div>
              <label>Phone</label>
              <input type="text" {...input} placeholder="Phone" />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        </Field>

        <button type="submit">Submit</button>
      </form>
    )}
  />
)

4. Formily

Formily — это инновационный набор инструментов, призванный упростить создание динамических форм и обеспечить оптимальную производительность на различных устройствах.

Особенности:

Возможность проектирования. Вы можете быстро и недорого разрабатывать формы с помощью Form Builder.
Высокая производительность, поля управляются независимо, вместо повторной отрисовки всего дерева.
Интегрированные компоненты Alibaba Fusion и Ant Design гарантированно работают «из коробки».
JSON Schema применена для BackEnd. JSchema применена для FrontEnd. Две парадигмы могут быть преобразованы друг в друга.
Побочные эффекты управляются независимо, что делает связывание данных форм проще, чем когда-либо прежде.
Переопределяйте самые сложные варианты использования макета формы.

Источник:

Exit fullscreen mode

#JavaScript #React #Начинающим