React Final Form 如何监听整个表单的onChange事件以持久化用户输入？

API 探路者

2026-9-29

这个需求完全可以实现，下面给两种符合你预期的实现方案：

方案1：直接使用Form组件的onChange回调

react-final-form的<Form>组件原生支持onChange属性，每次表单值发生变化时都会触发，回调参数为最新的表单状态对象，你可以直接从中取出values存储，和你期望的第一种写法完全一致：

import { Form } from 'react-final-form';

<Form
  // 打开表单时先回填本地存储的草稿
  initialValues={JSON.parse(localStorage.getItem('form_draft') || '{}')}
  onSubmit={yourSubmitHandler}
  onChange={(formState) => {
    // formState.values就是最新的完整表单数据
    saveToLocalStorage(formState.values);
  }}
>
  {/* 表单字段内容 */}
</Form>

方案2：配合Hook监听表单数据变化

如果你更喜欢用useEffect监听的写法，可以用react-final-form提供的useFormState Hook获取实时表单值，对应你期望的第二种写法：

import { useFormState, Form } from 'react-final-form';
import { useEffect } from 'react';

// 放在Form组件内部的子组件，不需要渲染任何内容
const FormDraftSaver = () => {
  const { values: formdata } = useFormState();
  // 可根据需求加300~500ms防抖优化，避免频繁触发存储
  useEffect(
    () => saveToLocalStorage(formdata),
    [formdata]
  );
  return null;
}

// 外层Form组件使用
<Form
  initialValues={JSON.parse(localStorage.getItem('form_draft') || '{}')}
  onSubmit={yourSubmitHandler}
>
  <FormDraftSaver />
  {/* 其他表单字段 */}
</Form>