Можно ли обрабатывать несколько форм одной кнопкой отправки? - PullRequest
Новая
       2

Можно ли обрабатывать несколько форм одной кнопкой отправки?

0 голосов
/ 25 марта 2020

У меня есть проект на ReactJS, который вы можете найти здесь (см. Develop-Branch) или проверить его на нашем веб-сайте . Как видите, я использую formik для обработки форм. Теперь у меня есть только одна кнопка отправки, которая обрабатывает все формы, однако она не связана с формами по атрибуту form. Все было в порядке.

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

export function GenerateButton(props) {
    return (
        <Button id="genButton"
                form="form1"
                type="submit"
                onClick={props.onClick}>
            Generate
        </Button>
    );
}

Любые идеи, как связать все формы с отправкой кнопка? Или я должен просто использовать фиктивные кнопки в каждой форме (позиция: абсолютная; слева: -9999px;) и имитировать их щелчок после нажатия кнопки «Генерировать»?

PS теперь есть id="forms" в html теге формы Это просто глупая ошибка, должен быть атрибут класса. Я могу создать уникальный идентификатор следующим образом: id={"form"+(props.index + 1)}.

PSS Мне очень жаль моего Engli sh.

1 Ответ

0 голосов
/ 26 марта 2020

Я думаю, вы легко справитесь с fieldarray Formik.
у вас будет массив и список форм, тогда вы можете просто добавлять и удалять формы.
вы не будет проблем с использованием валидации Formik.
Вот пример, который точно делает то, что вы хотите: 

import React from "react";
import { Formik, Form, Field, FieldArray } from "formik";

const formInitialValues = { name: "", lastName: "" };
const FormList = () => (
  <Formik
    initialValues={{ forms: [formInitialValues] }}
    onSubmit={values =>
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
      }, 500)
    }
    render={({ values }) => (
      <Form>
        <FieldArray
          name="forms"
          render={arrayHelpers => (
            <div>
              {values.forms.map((formItem, index) => (
                <div key={index}>
                  <Field name={`forms.${index}.name`} />
                  <Field name={`forms.${index}.lastName`} />
                  <button
                    type="button"
                    onClick={() => arrayHelpers.remove(index)} // remove a form from the list of forms
                  >
                    -
                  </button>
                  <button
                    type="button"
                    onClick={() =>
                      arrayHelpers.insert(index, formInitialValues)
                    } // insert an empty string at a position
                  >
                    +
                  </button>
                </div>
              ))}
              <div>
                <button type="submit">Submit</button>
              </div>
            </div>
          )}
        />
      </Form>
    )}
  />
);

export default FormList;

Я предоставил песочницу с кодом версию для вы тоже
пожалуйста, дайте мне знать, если у вас все еще есть проблемы

читать больше:
https://jaredpalmer.com/formik/docs/api/fieldarray#fieldarray-массив объектов

...