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

1. Используйте контролируемые компоненты

 
Управляемые компоненты — это предпочтительный способ обработки входных данных формы в React. Они сохраняют данные формы в состоянии компонента, что упрощает управление и проверку.
 
Сохраните все входные значения формы в состоянии. Создайте объект и сопоставьте все входные данные с их свойством в состоянии. Пример ниже

import React, { useState } from 'react';

const MyForm = () => {


  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  

2. Обработка ошибок

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

• Получение значения null или неопределенного значения
• Получение пустого значения
• Неверный тип данных и т. д.

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

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

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  

 
Для удобства работы вы должны использовать пакет Yup для плавной проверки данных формы. Это очень популярный пакет, используемый с библиотеками форм, такими как React-Hook-Form или Formik.
Да, документы: https://www.npmjs.com/package/yup
 

3. Используйте сторонние библиотеки

 
Такие библиотеки, как Formik и React Hook Form, упрощают управление формами, предлагая мощные функции «из коробки» и упрощая разработчикам создание и проверку форм более масштабируемым и гибким способом

Использование Formik:

Документы: https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   
 
    
Sign Up
     {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  

    First Name
    Last Name
    Email
    Submit
  
 
);


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

Нажмите, чтобы посмотреть живую демо-версию Formik

Заключение

 
Если следовать этим рекомендациям, создание форм в React.js может стать простым и эффективным. Используйте контролируемые компоненты для управления состоянием, тщательно проверяйте входные данные, используйте сторонние библиотеки, улучшайте UX с помощью правильного стиля и оптимизируйте производительность для создания адаптивных и надежных форм.
Следуя этим рекомендациям, вы можете гарантировать, что ваши формы надежны, удобны для пользователя и удобны в обслуживании, обеспечивая удобство работы как для пользователей, так и для разработчиков.