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

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

交互

我在用 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>
    )}
  />
);

我来解答赞 4 收藏

反馈

1 条解答

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