Я использую Formik и мне нужно сделать этот лог c. У меня большая форма, и после отправки мне нужно сбросить определенные поля в этой форме
Есть 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>