如何在 Formik 中提交后重置某些字段

Question

我正在使用 Formik，我需要制定这个逻辑。我有一个大表格，提交后我需要重置此表格中的某些字段

有 2 个按钮：保存和保存并新建

save 将保存数据并重定向。
保存并新建 将保存数据并重置前两个字段。

我尝试使用：

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>

Answer 1

提交表单时，您可以使用 setFieldValue 设置任何您不想保留的值，然后 setSubmitting 到 false，这样您想要的值就会保留你可以再次提交表格

请查找示例代码和框 here

如何在 Formik 中提交后重置某些字段

How to reset a certains fields after submit in Formik

reactjs

formik