React Final Form 重置表单字段和验证但保留 submitSucceeded

Question

我正在使用 React Final Form 来显示表单和处理表单提交。场景是我想清除成功提交的所有表单字段，但显示绑定到最终表单的提交成功消息 submitSucceeded FormState 属性.

如果我使用 form.reset() 这会清除所有字段和验证，但也会清除 submitSucceeded FormState。

callback: event => {
         handleSubmit(event).then(() => {
              form.reset();
          });
    },

我可以通过手动检查每个表单并删除字段值然后重置字段状态来实现此结果。问题是我想将此应用到任意数量的表单并且不想手动覆盖每个字段而是自动重置所有字段。

callback: event => {
     handleSubmit(event).then(() => {
          form.change('name', undefined);
          form.resetFieldState('name');
          form.change('email', undefined);
          form.resetFieldState('email');
      });
},

在此感谢任何帮助！参考：https://final-form.org/docs/final-form/types/FormState

Answer 1

我设法通过遍历发布的所有表单 values 并分别重置每个表单来实现此目的：

const submitForm = async (values, form) => {

    // Do something on form submit here

    // Reset form fields, note in a real world scenario
    // this would be inside a success callback
    Object.keys(values).forEach(key => {
        form.change(key, undefined);
        form.resetFieldState(key);
    });
};

React Final Form 重置表单字段和验证但保留 submitSucceeded

React Final Form reset form fields and validation but retain submitSucceeded

reactjs

final-form

react-final-form