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

1. Подход к управлению состоянием.
   Один из способов обработки нескольких входных данных — использование состояния React для хранения значений каждого поля ввода. Вы можете создавать отдельные переменные состояния для каждого входа и обновлять их с помощью хука useState. Вот пример:

import React, { useState } from 'react';
function MultipleInputs() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleNameChange = (event) => {
    setName(event.target.value);
  };
  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };
  return (
    <div>
      <input type="text" value={name} onChange={handleNameChange} />
      <input type="email" value={email} onChange={handleEmailChange} />
    </div>
  );
}

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

import React, { useState } from 'react';
function MultipleInputs() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };
  return (
    <div>
      <input type="text" name="name" value={formData.name} onChange={handleInputChange} />
      <input type="email" name="email" value={formData.email} onChange={handleInputChange} />
    </div>
  );
}

1. Библиотека Formik:
   Formik — это популярная библиотека форм для React, которая упрощает обработку форм. Он обеспечивает простой способ управления несколькими входными данными с поддержкой проверки. Вот пример:

import React from 'react';
import { useFormik } from 'formik';
function MultipleInputs() {
  const formik = useFormik({
    initialValues: { name: '', email: '' },
    onSubmit: (values) => {
      console.log(values);
    },
  });
  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        <input type="text" name="name" value={formik.values.name} onChange={formik.handleChange} />
        <input type="email" name="email" value={formik.values.email} onChange={formik.handleChange} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

1. Библиотека форм React Hook:
   React Hook Form — это еще одна библиотека, упрощающая обработку форм в React. Он ориентирован на производительность и предоставляет интуитивно понятный API. Вот пример:

import React from 'react';
import { useForm } from 'react-hook-form';
function MultipleInputs() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" name="name" ref={register} />
        <input type="email" name="email" ref={register} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

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