Question

我正在使用Formik，需要进行以下逻辑说明。我的表单很大，提交后我需要重置此表单中的某些字段

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

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

我尝试使用：

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中提交后如何重设某些字段

1 个答案: