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

Метод 1: использование состояния и карты
Один из самых простых способов обработки динамических входных данных в React — использование состояния и функции карты. Вот пример:

import React, { useState } from 'react';
function DynamicInputs() {
  const [inputs, setInputs] = useState(['']);
  const handleInputChange = (index, value) => {
    const updatedInputs = [...inputs];
    updatedInputs[index] = value;
    setInputs(updatedInputs);
  };
  const handleAddInput = () => {
    setInputs([...inputs, '']);
  };
  const handleRemoveInput = (index) => {
    const updatedInputs = [...inputs];
    updatedInputs.splice(index, 1);
    setInputs(updatedInputs);
  };
  return (
    <div>
      {inputs.map((input, index) => (
        <div key={index}>
          <input
            type="text"
            value={input}
            onChange={(e) => handleInputChange(index, e.target.value)}
          />
          <button onClick={() => handleRemoveInput(index)}>Remove</button>
        </div>
      ))}
      <button onClick={handleAddInput}>Add Input</button>
    </div>
  );
}
export default DynamicInputs;

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

import React from 'react';
import { Formik, Field, FieldArray } from 'formik';
function DynamicInputs() {
  return (
    <div>
      <Formik
        initialValues={{ inputs: [''] }}
        onSubmit={(values) => {
          // Handle form submission
        }}
      >
        {({ values }) => (
          <Form>
            <FieldArray name="inputs">
              {({ push, remove }) => (
                <div>
                  {values.inputs.map((input, index) => (
                    <div key={index}>
                      <Field name={`inputs.${index}`} />
                      <button type="button" onClick={() => remove(index)}>
                        Remove
                      </button>
                    </div>
                  ))}
                  <button type="button" onClick={() => push('')}>
                    Add Input
                  </button>
                </div>
              )}
            </FieldArray>
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
}
export default DynamicInputs;

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

import React from 'react';
import { useForm, useFieldArray } from 'react-hook-form';
function DynamicInputs() {
  const { register, control } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'inputs',
  });
  return (
    <div>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`inputs.${index}.value`)} />
          <button type="button" onClick={() => remove(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ value: '' })}>
        Add Input
      </button>
    </div>
  );
}
export default DynamicInputs;

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