1

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

当前的

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

期望的行为

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

当前行为示例

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

我的调查

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

4

1 回答 1

5

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

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

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

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

于 2020-03-02T06:05:36.363 回答