作为一名开发人员,我想在用户使用 React Final Form 成功提交表单时禁用“提交”按钮,并在用户在表单中输入一些新文本时启用“提交”按钮。
当前
变量pristine
仅在表单首次加载时将disable属性设置为true
,但当用户提交表单(而不是重新加载页面)时变量pristine
为 false
,我希望它为 true
以禁用“提交”按钮。
期望的行为
- 第一次加载表单时,“提交”按钮会被禁用。
- 当用户输入文本或进行更改时,“提交”按钮就会启用。
- 用户点击“提交”并成功后,“提交”按钮将被禁用。
- 如果用户在提交后输入更多更改,则应启用“提交”按钮。
当前行为示例
https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/simple
我的调查
我尝试使用最终表单提供的以下变量的组合,但结果不成功 pristine
、touched
、submitSucceeded
、最后提交的值
最佳答案
为此,您需要在提交后“重新初始化”表单。
提交成功后,您需要将提交的表单值传回 initialValues
支持<Form/>
。这将确保您的pristine
值准确反射(reflect)已保存/提交的值。
如果您这样做,pristine
应该是您的提交按钮需要知道是否应该禁用它的唯一值。
旁注:请仅在编辑现有数据的表单上实现此模式。原因是,如果您从空表单开始,并且有必填字段,尝试提交会很有帮助,因为它会将所有字段标记为 touched
这样你就可以显示错误消息。但是如果您禁用 pristine
上的提交按钮,您无法获得此福利。
关于javascript - React Final Form提交成功后如何将表单设置为 "pristine",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60461293/