如何在 React Final Form 中提交成功后将表单设置为 "pristine"

Question

作为开发人员，我想在用户使用 React Final Form 成功提交表单时禁用 "Submit" 按钮，并在用户在形式。

当前

变量pristine仅在表单第一次加载时将禁用属性设置为true，但当用户提交表单（不重新加载页面）时变量pristine 是 false，我希望它是 true，以便禁用 "Submit" 按钮。

期望的行为

• 第一次加载表单时，提交按钮被禁用。
• 当用户输入文本或进行更改时，将启用“提交”按钮。
• 用户点击提交成功后，提交按钮被禁用。
• 如果用户在提交后输入更多更改，则应启用“提交”按钮。

当前行为示例

https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/simple

我的调查

我尝试使用 Final Form 提供的以下变量的组合，但结果不成功 pristine、touched、submitSucceeded、lastSubmittedValues

Answer 1

为此，您需要在提交后 "reinitialize" 表单。

提交成功后，您需要将提交的表单值传回 <Form/> 上的 initialValues 属性。这将确保您的 pristine 值准确反映 saved/submitted.

的值

如果你这样做，pristine 应该是你的提交按钮需要知道它是否应该被禁用的唯一值。

---

旁注：请仅在编辑现有数据 的表单上实施此模式。原因是，如果您从一个空表单开始，并且有必填字段，尝试提交会很有帮助，因为它会将所有字段标记为 touched，这样您就可以显示错误消息。但是，如果您禁用 pristine 上的提交按钮，则无法享受此优惠。