Библиотеки React для создания форм и опросов

Время на прочтение статьи
На чтение10 мин
Дата обновления статьи
Обновлено
Просмотров статьи
Просмотров

Хотя создание форм в React может быть простым делом, управление ими может стать сложным. Например, не полагаясь на библиотеку форм, разработчик должен:

    Обрабатывать проверку: например, при каждом событии onChange или onSubmit мы должны указывать React, чтобы он проверял, соответствует ли определенное поле заданным критериям Обработка отправлений: Если пользователь хочет зарегистрироваться в нашем приложении, мы должны проверить, есть ли его адрес электронной почты в базе данных, а затем разобраться с ситуацией, исходя из этого Учитывайте производительность: иногда отображение сложных компонентов или использование сложной логики проверки в наших формах может привести к снижению производительности

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

    SurveyJS: библиотека для создания форм, которая позволяет разработчикам создавать JSON-формы и опросы. Помимо React, она включает в себя интеграцию с Angular, Vue, jQuery и Knockout React Hook Form: библиотека без интерфейса, которая позволяет разработчикам обрабатывать формы, не создавая слишком много шаблонного кода. Эта библиотека также поддерживает React Native rc-field-form: Как и React Hook Form, rc-field-form позволяет пользователям управлять формами как на веб-, так и на мобильных платформах. Более того, он ориентирован на производительность и результативность. Это особенно полезно для разработчиков, которые хотят создавать легкие приложения. Tanstack Form - это облегченная библиотека для управления формами, созданная командой TanStack. Кроме того, она поддерживает множество других библиотек, таких как Vue, Angular, Lit и другие

Теперь, когда мы вкратце представили некоторые библиотеки форм React, давайте рассмотрим их!

Настройка нашего проекта React

Прежде чем писать код, нам сначала нужно создать каркас нашего проекта React. Для этого запустите следующую команду в терминале:

#initialize React project with Typescript:
npm create vite@latest form-libraries --template react-ts
cd form-libraries
npm install #install the needed packages to run the project.

Библиотеки форм React: SurveyJS

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

    Локализация: SurveyJS поддерживает автоматический перевод строк, что устраняет необходимость в ручном вводе данных Создание визуальных форм: позволяет пользователям, не имеющим опыта в программировании, создавать формы с помощью визуального интерфейса Настраиваемые предварительно разработанные компоненты: Предлагает ряд предварительно разработанных компонентов, которые можно легко настроить в соответствии с конкретными потребностями в дизайне

Чтобы включить SurveyJS в наш проект, установите его через npm:

npm install survey-react-ui --save

Этот блок кода демонстрирует библиотеку SurveyJS в действии:

import "survey-core/defaultV2.min.css";
import { Model, SurveyModel } from "survey-core";
import { Survey } from "survey-react-ui";
import { useCallback } from "react";

export function SurveyExample() {
  //create our schema for our form:
  const surveyJson = {
    elements: [
      //configure our fields
      {
        name: "FirstName",
        title: "Enter your first name:",
        type: "text",
      },
      {
        name: "LastName",
        title: "Enter your last name:",
        type: "text",
      },
    ],
  };
  //feed the schema into the model
  const survey = new Model(surveyJson);
  //handler function that runs when the user submits the form
  const surveyComplete = useCallback((survey: SurveyModel) => {
    const userOutput = survey.data;
    console.log(userOutput);
  }, []);
  //attach this handler to the form
  survey.onComplete.add(surveyComplete);
  return (
    <div>
      {/*Finally, pass our model and render the form*/}
      <Survey model={survey} />
    </div>
  );
}
//don't forget to render this component in App.tsx!

В приведенном выше фрагменте кода:

    Сначала мы объявили переменную surveyJson, которая будет схемой для нашей формы. Схема будет передавать данные, необходимые для отображения нашей формы Затем мы инициализировали обработчик surveyComplete. Эта функция будет запускаться всякий раз, когда пользователь отправляет форму. В данном случае мы просто выводим данные, введенные пользователем в консоль Наконец, мы передали нашу модель компоненту Survey для отображения нашей формы в DOM

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

npm run dev

SurveryJS Demo

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

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

    Подписки: React Hook Form позволяет разработчикам просматривать отдельные входные данные без повторного отображения родительских компонентов Изоляция повторного отображения: Библиотека использует приемы повышения производительности для предотвращения ненужного повторного отображения в своем приложении Headless: Это означает, что разработчики могут свободно выбирать свои любимые библиотеки компонентов для использования с React Hook Form API на основе Hook: позволяет компонентам получать доступ к локальному состоянию и манипулировать им с относительной легкостью. Это также указывает на то, что библиотека следует рекомендациям React.

Как всегда, первым шагом является установка React Hook Form в ваш проект:

npm install react-hook-form

Вот фрагмент кода, который демонстрирует проверку в форме React Hook:

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

type Inputs = {
  twice: boolean;
  newjeans: boolean;
  name: string;
};
export default function ReactHookForm() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>({ defaultValues: { twice: true, name: "LogRocket" } });
  const [output, setOutput] = useState<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => setOutput(data);
  return (
    <div>
      <h1>Your favorite group?</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* register your input into the hook by invoking the "register" function */}
        <label>
          <input type="checkbox" {...register("twice")} />
          Twice
        </label>
        <label>
          {" "}
          <input type="checkbox" {...register("newjeans")} />
          NewJeans
        </label>
        <label>
          {" "}
          Name
          <input type="text" {...register("name")} />
        </label>
        {/* include validation with required or other standard HTML validation rules */}
        {/* errors will return when field validation fails  */}
        <input type="submit" />
      </form>
      <p>{output?.newjeans && "newjeans was selected"}</p>
      <p> {output?.twice && "twice was selected"}</p>
      <p> Name: {output?.name} </p>
    </div>
  );
}

Давайте разберем этот код по частям:

    Сначала мы создали тип Inputs, который содержит поля, которые мы хотим заполнить Затем мы использовали механизм useForm и передали наши поля и значения по умолчанию через свойство defaultValues После этого мы объявили наш обработчик onSubmit, который обновит обработчик с именем output. Позже в этом коде мы передадим обработчик вывода в DOM Далее мы использовали функцию register для наших компонентов ввода. Это говорит React о том, что мы хотим подключить наши входные данные к перехватчику useForm Наконец, React отобразит значение перехватчика output в зависимости от ввода пользователя

Вот и все! Давайте проверим, как формируется крючок React:

React Hook Form Demo

rc-поле-форма

Подобно React Hook Form, rc-field-form - это еще одна библиотека форм React, которая фокусируется на производительности и простоте использования.

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

npm install rc-field-form

В этом фрагменте показано, как можно реализовать асинхронную проверку текстового поля с помощью библиотеки rc-field-form:

import Form, { Field } from "rc-field-form";

const Input = ({ value = "", ...props }) => <input value={value} {...props} />;
export const RCFieldFormExample = () => {
  return (
    <Form
      onFinish={(values) => {
        console.log("Finish:", values);
      }}
    >
      <Field
        name="username"
        validateTrigger={["onSubmit"]}
        rules={[
          { required: true },
          {
            validator(rule, value) {
              if (value === "Log") {
                return Promise.reject(alert("Not allowed!"));
              }
              return Promise.resolve();
            },
          },
        ]}
      >
        <Input placeholder="Username" />
      </Field>
      <Field name="password">
        <Input placeholder="Password" />
      </Field>
      <button>Submit</button>
    </Form>
  );
};

Вот краткое описание нашей программы:

    Мы отрисовали компонент Form и определили обработчик onFinish. Это сообщит React, что он должен выводить данные, введенные пользователем, на консоль после отправки Затем мы отрисовали два компонента Field: один для имени пользователя, а другой для пароля Затем, для проверки, мы настроили параметр rules prop в поле username. Здесь мы указали библиотеке, что, если для поля username задано значение Log, оно должно отображать сообщение об ошибке

Вот выходные данные этого кода:

RC-Field-Form Demo

Мило! Как вы можете видеть, наш код работает!

Формы Tanstack с Zod

Команда Tanstack не нуждается в представлении. Недавно они добавили TanStack Form в свой арсенал высококачественных утилит. Хотя библиотека все еще находится в стадии бета-тестирования, она содержит исчерпывающий список функций, включая:

    Headless: Так же, как и React Hook Form, TanStack Form обрабатывает всю логику, и разработчики могут использовать свою библиотеку компонентов по своему выбору Асинхронная проверка Легкий Конструкция на основе крючка

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

#react-form: to render and build forms
#zod-form-adapter and zod: For validation purposes.
npm i @tanstack/react-form @tanstack/zod-form-adapter zod

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

import type { FieldApi } from "@tanstack/react-form";

function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
  return (
    <>
      {/*If error occurs, display it. */}
      {field.state.meta.isTouched && field.state.meta.errors.length ? (
        <em>{field.state.meta.errors.join(",")}</em>
      ) : null}
      {field.state.meta.isValidating ? "Validating..." : null}
    </>
  );
}

Здесь мы создали компонент под названием FieldInfo, который будет проверять, не прошел ли пользователь какие-либо проверки. Если это условие выполнено, на странице отобразится сообщение об ошибке.

Наконец, напишите этот блок кода для рендеринга и проверки формы с помощью Tanstack Form:

import { useForm } from "@tanstack/react-form";
import { zodValidator } from "@tanstack/zod-form-adapter";
import { z } from "zod";

//step 1: define our schema and each field's requirements
const userSchema = z.object({
  //if the user's name is Log, display an error.
  firstName: z.string().refine((val) => val !== "Log", {
    message: "[Form] First name cannot be Log!",
  }),
  //the user's age should be atleast 18.
  age: z.coerce.number().min(18, "Need to be an adult!"),
});

type User = z.infer<typeof userSchema>;
export default function TanstackFormExample() {
  //use the useForm hook and define our default values.
  const form = useForm({
    defaultValues: {
      firstName: "",
      age: 0,
    } as User,
    onSubmit: async ({ value }) => {
      console.log(value);
    },
    //configure our validation
    validatorAdapter: zodValidator(),
    validators: {
      onSubmit: userSchema,
    },
  });
  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        <div>
          {/*Create our fields and inputs*/}
          <form.Field
            name="firstName"
            children={(field) => {
              return (
                <>
                  <label htmlFor={field.name}>First Name:</label>
                  <input
                    id={field.name}
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                  />
                  <FieldInfo field={field} />
                </>
              );
            }}
          />
        </div>
        <div>
          {/*Second input for the user's age*/}
          <form.Field
            name="age"
            children={(field) => (
              <>
                <label htmlFor={field.name}>Age:</label>
                <input
                  id={field.name}
                  name={field.name}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={(e) => field.handleChange(e.target.valueAsNumber)}
                />
                <FieldInfo field={field} />
              </>
            )}
          />
        </div>
        <div></div>
        {/*This component will run when the form's state changes*/}
        <form.Subscribe
          selector={(state) => {
            return state;
          }}
          children={(state) => {
            return (
              //check if the user can submit the form:
              <button type="submit" disabled={!state.canSubmit}>
                {state.isSubmitting ? "..." : "Submit"}
              </button>
            );
          }}
        />
      </form>
    </div>
  );
}

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

При запуске вывод формы TanStack должен выглядеть следующим образом:

TanStack Form Demo

Сравнение рассмотренных нами библиотек форм React

Вот таблица, в которой сравниваются библиотеки, рассмотренные нами в этом руководстве:

Â' 

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

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

Спасибо вам за чтение!

#React