Antd Form 笔记（2）：监听表单字段变化的四种方法

在构建React应用时，我们经常会遇到需要监听Ant Design Form表单字段变化的情况，本文将介绍四种不同的方法来实现此需求。

1. form.getFieldValue

我们首先看一种基础的方法，那就是使用form.getFieldValue。例如，我们有一个字段"name"，我们想要监听它的变化：

const [form] = Form.useForm();
const nameValue = form.getFieldValue('name');

<Form form={form}>
  <Form.Item label="Name" name="name">
    <Input />
  </Form.Item>

  {nameValue && <div>Name: {nameValue}</div>}
</Form>

但是，这种方法的问题是，获取的值并不会触发UI的更新，除非有其他的re-render触发。

2. useState

为了解决这个问题，我们可以利用React的useState：

const [form] = Form.useForm();
const [nameValue, setNameValue] = useState('');

<Form form={form}>
  <Form.Item label="Name" name="name">
    <Input onChange={(event) => setNameValue(event.target.value)} />
  </Form.Item>

  {nameValue && <div>Name: {nameValue}</div>}
</Form>

然而，当我们使用Form的内置方法（如form.setFieldsValue、form.resetFields）更新"name"字段时，nameValue并不会更新。

3. Form.useWatch

从Ant Design 4.20.0开始，Ant Design为Form添加了一个新的API——Form.useWatch，用于处理上述问题：

const [form] = Form.useForm();
const nameValue = Form.useWatch('name', form);

<Form form={form}>
  <Form.Item label="Name" name="name">
    <Input />
  </Form.Item>

  {nameValue && <div>Name: {nameValue}</div>}
</Form>

但是，Form.useWatch会触发整个组件的重新渲染（re-render）和diff检查，这对于大组件或者需要实时输入的情况可能是性能问题。

4. Watch组件（Ant Plus 5）

Ant Plus 5提供了一个Watch组件，它专门用于监听Form的字段变化，并只更新局部UI：

import { Form, Watch, Input } from 'antx';

const [form] = Form.useForm();

<Form form={form}>
  <Input label="Name" name="name" />

  <Watch name="name">
    {(nameValue) => {
      return nameValue && <div>Name: {nameValue}</div>;
    }}
  </Watch>
</Form>

使用Watch组件，可以避免Form.useWatch的全量重新渲染问题，并且代码更为简洁