Как сбросить определенные поля после отправки в Formik - PullRequest
0 голосов
/ 08 января 2020

Я использую Formik и мне нужно сделать этот лог c. У меня большая форма, и после отправки мне нужно сбросить определенные поля в этой форме

Есть 2 кнопки: Сохранить и сохранить & Новый

  1. сохранить сохранит данные и перенаправит.
  2. Save & New сохранит данные и сбросит первые два поля.

Я пытался использовать:

  • resetForm но он сбрасывает все формы
  • setValues ​​ не работает
  • setFieldValues ​​ предотвращает запрос API
  • установить значения вручную также не работает

Вот код

const initialValues = { value1: "", value2: "", value3: "", value4: "" };

<Formik
            initialValues={initialValues}
            enableReinitialize
            validationSchema={Schema}
            validateOnChange={false}
            validateOnBlur={false}
            onSubmit={(values, { setSubmitting, resetForm }) => {
                props.addData(values);        // api request
                setSubmitting(false);
                // resetForm(initialValues); // this will reset all the form fields
                // values.value1 = "";       // does not work
            }}
        >
            {({ values, handleChange, handleSubmit, setFieldValue, errors }) => (
                <Form>
                    <Row>
                        <Field type="text" name="value1" />
                        <Field type="text" name="value2" />
                        <Field type="text" name="value3" />
                        <Field type="text" name="value4" />
                    </Row>
                    <StyledRow>
                        <Button
                            variant="outline-primary"
                            onClick={() => {
                                handleSubmit();
                                history.push("/tableOverview");
                            }}
                        >
                            Save
                        </Button>
                        <Button
                            variant="outline-primary"
                            onClick={() => {
                               handleSubmit();
                               // this prevents the api request, because of async code I guess
                               // setFieldValue("value1", "");
                               // setFieldValue("value2", "");
                            }
                        >
                            Save & New
                        </Button>
                    </StyledRow>
                </Form>
            )}
        </Formik>

1 Ответ

0 голосов
/ 08 января 2020

При отправке формы вы можете установить любые значения, которые вы не хотите переустанавливать, используя setFieldValue и более поздние setSubmitting до false, так что нужные значения будут сохранены, и вы сможете снова отправить форму

Здесь вы найдете примеры кодов и поле здесь

...