我有一个react最终表单form。该组件公开了values字段。此字段包含表单内部更改的所有字段。问题是，我想从表单外部访问值。
<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，使这些值在表单外部可见？
我发现在表单外部获取表单状态的最简单方法是使用MutableRefObject来获取对表单内部可用的表单实例的引用。
实现这一目标的步骤：
- 创建
MutableRefObject(它基本上只是一个ref对象，其current值可以更改(
const formRef: React.MutableRefObject<FormApi> = useRef(null);
如果您有表单的接口，您可以添加这样的表单接口，以获得我们可以通过此引用访问的属性的键入：
const formRef: React.MutableRefObject<FormApi<IForm, Partial<IForm>>> = useRef(null);
- 在
<Form>内部，将form实例附加到我们刚刚创建的MutableRefObject：
<Form onSubmit={onSubmitHandler}>
{({ handleSubmit, submitting, form, dirty }) => {
// form reference to access for outside
formRef.current = form;
- 现在，您可以使用
formRef访问Final Form Docs-'FormAPi'中描述的所有属性，如下所示：
formRef.current.getFieldState();
formRef.current.change('fieldName',"value");
说明：
此方法本质上创建一个ref对象，并将form实例附加到该对象，由于它是MutableRefObject，因此可以在不引起重新渲染的情况下对其进行更改。现在，可以从任何地方访问和控制整个表单状态以及对表单的修改。