如何在 react-final-form 的表单外访问 "pristine"、"submitting" 和 "form.reset"？

Question

我想用“保存”（提交）和“放弃”（重置）按钮在表单上方显示：“您有未保存的更改”（当表单不是原始状态时）。

如何在表单外访问诸如“pristine”、“submitting”和“form.reset”之类的内容？

我只能找到一个带有外部提交的示例 (https://final-form.org/docs/react-final-form/examples#external-submit)，但这些东西似乎并不遵循相同的模式。

Answer 1

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

Answer 2

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

此 form 实例随后可用于访问表单状态、更改字段值等等。要详细了解 form 实例的功能 - React Final Form - Form API

关于如何提取 form 实例的说明 - Access react-final-form values from outside the form

Answer 3

Final Form Submit Listener

试试这个解决方案并告诉我结果

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

如何在 react-final-form 的表单外访问 "pristine"、"submitting" 和 "form.reset"？

How to access "pristine", "submitting" and "form.reset" outside the form in react-final-form?

reactjs

react-final-form