如何在反应最终形式中访问表单外的"pristine"、"submitting"和"form.reset"？

Question

我想在表单上方显示："您有未保存的更改"(当形式不是原始的时(；保存"；(提交(及"；丢弃"；(重置(按钮。

我如何访问诸如"；"原始"提交"；以及"；form.reset"；在表单之外？

我只能找到一个外部提交的例子(https://final-form.org/docs/react-final-form/examples#external-提交(，但这些事情似乎并没有遵循相同的模式。

Answer 1

如果您无法将所有内容封装在<Form>标记中，则可以使用MutableRefs从表单中提取form实例。

然后，这个form实例可以用于访问表单状态、更改字段值等等。了解更多关于form实例的功能-React Final Form-Form API

关于如何提取form实例的说明-Access从表单外部反应最终表单值

Answer 2

我将整个组件封装在<Form>元素中。似乎是最干净的解决方案。

Answer 3

最终表单提交侦听器

试试这个解决方案，告诉我是什么

const submitListener = createDecorator({
beforeSubmit: formApi => { 
alert("go");
formApi.reset();
},
afterSubmitSucceeded: formApi => {  alert("ok") },
afterSubmitFailed: formApi => {  alert("ko") },
})