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

标签 javascript reactjs forms react-final-form final-form

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

当前

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

期望的行为

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

当前行为示例

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

我的调查

我尝试使用最终表单提供的以下变量的组合,但结果不成功 pristinetouchedsubmitSucceeded最后提交的值

最佳答案

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

提交成功后,您需要将提交的表单值传回 initialValues支持<Form/> 。这将确保您的pristine值准确反射(reflect)已保存/提交的值。

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

<小时/>

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

关于javascript - React Final Form提交成功后如何将表单设置为 "pristine",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60461293/

相关文章:

javascript - 使用 Protractor 将 pdf 保存到文件

reactjs - 使用 Jest 和 enzyme 进行 native 单元测试时出现 TypeError : Cannot read property 'getParam' of undefined.?

python - 如何隐藏默认标签 Django 模型表单?

javascript - Google-Analytics:事件跟踪表单操作

javascript - Node.js 原型(prototype)继承

javascript 获取之间的时间

javascript - 有没有办法在代码后面使用变量来引用 asp ID

javascript - useLocation 抛出对象不是函数

javascript - 无法对 Gatsby 站点中 Ant Design Table 中的列进行排序

forms - JQuery 移动选择选项文本太长