重置表单而不丢失 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);
    });
};

重置表单而不丢失 submitSucceeded

Reset form without losing submitSucceeded

react-final-form

final-form