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);
    });
};

反应最终形式重置表单字段和验证，但保留submitSucceeded

1 个答案: