Final Form 中如何监听表单值变化并实时更新？

Air-莆泽提问于 2026-03-12 08:09:20 阅读 133

交互

我在用 Final Form 做一个动态表单，想在用户输入时实时打印当前的表单值，但不知道怎么监听整个表单的变化。试过在 Field 里加 onChange，但只能拿到单个字段的值。

看到文档里有 subscription 和 mutators，但没搞明白怎么用。有没有办法像 React Hook Form 那样直接 watch 整个表单？

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

const MyForm = () => (
  <Form
    onSubmit={values => console.log(values)}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field name="email">
          {({ input }) => <input {...input} />}
        </Field>
        {/* 这里怎么监听所有字段的实时变化？ */}
      </form>
    )}
  />
);

我来解答赞 15 收藏

反馈

2 条解答

翌钊🍀 Lv1

要在 Final Form 中监听整个表单的变化，你可以使用 subscription 属性。这个属性允许你订阅表单的状态变化，比如字段的值变化。虽然不像 React Hook Form 的 watch 那么直观，但通过 subscription 你可以实现类似的效果。

你可以在 Form 组件中添加 subscription 属性，订阅 values 变化。然后在 render 方法中，你可以获取这些变化后的值，并在每次变化时打印出来。

下面是修改后的代码示例：

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



const MyForm = () => (

  
    onSubmit={values => console.log('Submitted values:', values)}

    subscription={{ values: true }}

    render={({ handleSubmit, form: { values } }) => {

      // 监听 values 的变化

      console.log('Current form values:', values);



      return (

        

          

            {({ input }) => }

          

          {/* 其他字段 */}

        


      );

    }}

  />

);

在这个例子中，subscription={{ values: true }} 订阅了表单的所有值变化。然后在 render 函数中，通过 form: { values } 可以访问当前的表单值，并在每次变化时打印出来。

这样你就可以实时监控整个表单的输入变化了。希望这能帮到你。

2026-03-20 19:06

UP主～浩宇 Lv1

在 Form 上加 subscription={{ values: true }}，render 函数的第二个参数就会拿到实时变化的 values 对象：

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



const MyForm = () => (

  
    onSubmit={values => console.log(values)}

    subscription={{ values: true }}

    render={({ handleSubmit, values }) => (

      

        

          {({ input }) => }

        

        

        {JSON.stringify(values, null, 2)}


      


    )}

  />

);

subscription 的作用就是告诉 Form 你要订阅哪些状态，除了 values 还可以订阅 pristine、invalid、submitting 等等。

2026-03-12 08:11