Formik，如何重置“dirty”属性

Question

我有一个多步骤表单应用程序。第一页用户填写表单。第二页是确认页面，用户可以在此检查所有数据或编辑它们，并返回到第一页。在表单页上，我禁用提交按钮，直到它通过所有验证规则。

           <Button
              type="submit"
              disabled={!(formik.isValid && formik.dirty)}
              onClick={() => {
                dispatch(sendSms()).then(() => {
                  setModal(true);
                });
              }}
            >
              Продолжить
           </Button>

问题是当我回到页面时，提交按钮被禁用了。我需要将脏数据属性设置为“true”。如何做到这一点？

 <Formik
    initialValues={formValues || initialValues}
    validationSchema={validationSchema}
    enableReinitialize
    onSubmit={onSubmit}
    onChange={onSubmit}
    validateOnMount={true}
  >

const onSubmit = (values, submitProps) => {
  setFormValues(values);
  submitProps.resetForm();  
};

- Yerlan Yeszhanov

Answer 1

你已经接近了答案，这是您所期望的正确方式。

const onSubmit = async (values, submitProps) => {
  // Do your stuff that handles submission
  // ...

  // When you consider your submission a success, run the below code.
  // Mind the "values".
  submitProps.resetForm({ values });  
};

- Kostiantyn Ko

Answer 2

在Formik中，dirty是一个只读的计算属性，不应直接进行修改。 它会在值与初始值不完全相等时返回true。 所以你需要添加另一个dirty值（但不是Formik的dirty）。 或者你可以通过手动设置Formik的值来将Formik的dirty设置为true， 例如：

formik.setFieldValue("name", "New Name")

- CristianR