Как сделать мульти форму реакт?

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

1. Создайте компонент MultiForm, который будет содержать все формы внутри себя:

import React, { useState } from 'react';

const MultiForm = () => {
  const [forms, setForms] = useState([{}]); // Используем состояние, чтобы хранить значения форм
 
  const handleChange = (index, event) => {
    const { name, value } = event.target;
    const updatedForms = [...forms];
    updatedForms[index][name] = value;
    setForms(updatedForms);
  };

  const addForm = () => {
    setForms([...forms, {}]);
  };

  const removeForm = (index) => {
    const updatedForms = [...forms];
    updatedForms.splice(index, 1);
    setForms(updatedForms);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Обработка отправки формы
  };

  return (
    <div>
      <h1>Мультиформа</h1>
      {forms.map((form, index) => (
        <form key={index} onSubmit={handleSubmit}>
          <input type="text" name="field1" value={form.field1 || ''} onChange={(e) => handleChange(index, e)} />
          <input type="text" name="field2" value={form.field2 || ''} onChange={(e) => handleChange(index, e)} />
          <button type="button" onClick={() => removeForm(index)}>Удалить форму</button>
          <hr />
        </form>
      ))}
      <button type="button" onClick={addForm}>Добавить форму</button>
    </div>
  );
};

export default MultiForm;

2. В компоненте MultiForm создано состояние forms, которое является массивом объектов. Каждый объект представляет отдельную форму и содержит значения полей формы.

3. В обработчике handleChange мы обновляем состояние формы, изменяя соответствующие поля в объекте формы.

4. В функции addForm мы добавляем новый пустой объект формы в массив forms, когда пользователь нажимает кнопку "Добавить форму".

5. В функции removeForm мы удаляем форму из массива forms по индексу, когда пользователь нажимает кнопку "Удалить форму".

6. В обработчике handleSubmit мы обрабатываем отправку формы.

7. Возвращаем JSX с использованием map для отображения каждой формы. Используем значение из состояния forms для установки значения полей формы и обработчики событий onChange для отслеживания изменений полей формы.

8. Наконец, создаем кнопку "Добавить форму" для добавления новой формы и кнопку "Удалить форму" для удаления формы.

Теперь вы можете использовать компонент MultiForm в своем приложении и он будет позволять добавлять и удалять несколько форм.