从表单外部访问react-final-form值

Question

我有一个反应最终形式表格。该组件公开值字段。该字段包含表单内更改的所有字段。问题是，我想从外部访问这些值。

     <Form onSubmit={onSubmit} render={({handleSubmit,values}) => 
       ...
       {JSON.stringify(values)} <- this works
     </Form>
<div>
{JSON.stringify(values)} <- this is outside, it doesn't work
</div>

我想避免仅仅为了能够访问值而将所有内容都推入表单内。有什么方法可以在外部访问它，或者至少可以从外部传递值/setValues 以使值在表单外部可见？

Answer 1

我发现在表单外部获取表单状态的最简单方法是使用 aMutableRefObject来获取对表单内部可用的表单实例的引用。

实现这一目标的步骤：

1. 创建一个MutableRefObject （它基本上只是一个可以更改值的ref对象）current

const formRef: React.MutableRefObject<FormApi> = useRef(null);

如果您有表单接口，则可以像这样添加表单接口，以获取我们可以通过此引用访问的属性的类型：

const formRef: React.MutableRefObject<FormApi<IForm, Partial<IForm>>> = useRef(null);

2. 在 内<Form>，将form实例附加到MutableRefObject我们刚刚创建的：

<Form onSubmit={onSubmitHandler}>
    {({ handleSubmit, submitting, form, dirty }) => {
        // form reference to access for outside
        formRef.current = form;

3. 现在，您可以用来访问最终表单文档formRef中描述的所有属性- 'FormAPi' ，如下所示：

formRef.current.getFieldState();
formRef.current.change('fieldName',"value");

解释：

此方法本质上创建一个ref对象并将form实例附加到该对象，并且由于它是MutableRefObject，因此可以更改它而不会导致重新渲染。现在，可以从任何地方访问和控制整个表单状态以及对表单的修改。