重置表单而不会丢失 submitSucceeded答案

【问题标题】：Reset form without losing submitSucceeded重置表单而不会丢失 submitSucceeded
【发布时间】：2018-09-07 08:33:17
【问题描述】：

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

【问题讨论】：

标签： react-final-form final-form

【解决方案1】：

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

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

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

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

两者都不是非常优雅，但是......

【讨论】：

谢谢。我已经完成了b。我将向您发送 PR 以向 API 添加明确信息。也许你会接受它?

【解决方案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);
    });
};

【讨论】：