如何在 react-final-form 的表单之外访问“原始”、“提交”和“form.reset”？答案

【问题标题】：How to access "pristine", "submitting" and "form.reset" outside the form in react-final-form?如何在 react-final-form 的表单之外访问“原始”、“提交”和“form.reset”？
【发布时间】：2020-11-22 18:18:13
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs react-final-form

【解决方案1】：

Final Form Submit Listener

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：