react-final-form - 重置表单而不会丢失 submitSucceeded

Question

使用 React Final Form 时，有没有办法在不丢失 submitSucceeded 状态的情况下重置表单。我想在表单上显示一条成功消息，但我也想在成功提交后清除它。

Answer 1

reset()清除所有状态。您可以：

a) 注意何时submitSucceeded变为true并在本地保存该状态setState()，或

b）手动清除每个字段，例如：

form.batch(() => {
  form.change('firstField', '')
  form.change('secondField', '')
  form.change('thirdField', '')
  // ...
}) 

两者都不是令人难以置信的优雅，但是......

Answer 2

如果您不想手动重置每个字段，您可以遍历所有表单发布的值并单独重置：

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