從表單外部訪問 react-final-form 值

Question

我有一個反應最終形式的表格。 該組件公開了 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 以使這些值在表單之外可見？

Answer 1

我發現在表單外獲取表單 state 的最簡單方法是使用MutableRefObject來獲取對表單內可用的表單實例的引用。

實現這一目標的步驟：

1. 創建一個MutableRefObject （它基本上只是一個可以更改current值的ref object）

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訪問Final Form Docs - 'FormAPi'中描述的所有屬性，如下所示：

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

解釋：

該方法本質上創建了一個ref object 並將form實例附加到 object，並且由於它是一個MutableRefObject ，因此可以對其進行更改而不會導致重新渲染。 現在，可以從任何地方訪問和控制整個表格 state 以及對表格的修改。