在 React Final Form 中提交成功后如何将表单设置为“原始”

Question

作为一名开发人员，我想在用户使用 React Final Form 成功提交表单时禁用“提交”按钮，并在用户在表单中输入一些新文本时启用“提交”按钮。

当前的

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

期望的行为

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

当前行为示例

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

我的调查

我尝试使用最终表格提供的以下变量的组合，但结果不成功pristine,,,,touchedsubmitSucceededlastSubmittedValues

Answer 1

为此，您需要在提交后“重新初始化”表单。

提交成功后，您需要将这些提交的表单值传递回 的initialValuesprop中<Form/>。这将确保您的pristine值准确反映已保存/提交的值。

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

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