Formik 重置表单展示新值及提交按钮禁用实现问题

问题原因 #

Formik 的dirty状态、表单重置逻辑都是以初始化的initialValues为基准进行对比的，你当前仅给resetForm传入了values参数，只修改了重置后的表单展示值，没有更新基准初始值，就会出现取值还是旧值、后续状态计算错误的问题。

修复代码 #

修改你的onSubmit逻辑如下即可：

onSubmit: (values, { setSubmitting, resetForm }) => {
    onFormSubmit(values)
    // 重置时同时更新表单值和基准初始值
    resetForm({
        values: values,
        initialValues: values
    })
    setTimeout(function(){
        setSubmitting(false)
    }, 1000);
}

逻辑说明 #

• 传入values: values会让表单重置后直接展示你刚提交的最新值，不会退回修改前的旧值
• 传入initialValues: values会更新Formik内部的初始值基准，此时dirty会正确变为false，符合你「表单未改动时禁用提交按钮」的规则，后续用户修改表单时dirty也会正常触发为true
• 你原有提交按钮的禁用逻辑不需要修改，可正常生效

内容的提问来源于stack exchange，提问作者Tom Bom