2

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

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

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

4

1 回答 1

3

我设法通过遍历所有发布的表单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);
    });
};
于 2020-01-30T14:55:37.317 回答