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



作为一名开发人员,当用户使用React Final form成功提交表单时,我想禁用"提交"按钮,如果用户在表单中输入一些新文本,我想启用"提交"键。

电流

变量pristine仅在表单首次加载时将禁用道具设置为true,但当用户提交表单(而不是重新加载页面(时,变量pristinefalse,我希望它为true以禁用"提交"按钮。

所需行为

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

当前行为示例

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

我的调查

我尝试使用Final Form提供的以下变量的组合,但没有成功pristinetouchedsubmitSucceededlastSubmittedValues

要做到这一点,您需要在提交后"重新初始化"表单。

提交成功后,您需要将这些提交的表单值传递回<Form/>上的initialValues道具。这将确保您的pristine值准确反映已保存/提交的值。

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


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

相关内容

  • 没有找到相关文章