antd中Form.useWatch的源码

以下是 Ant Design 中 Form.useWatch 的简化版源码：

function useWatch(fields: string[], callback: () => void, dependencies: any[]) {
  const form = useContext(FormContext);

  useEffect(() => {
    const unwatch = form.watch(fields, callback);
    return () => {
      unwatch();
    };
  }, [...dependencies, form]);
}

Form.useWatch 的实现依赖于 FormContext，通过 useContext 获取 Form 组件的上下文。useWatch 的核心是调用 form.watch 方法，监听指定表单字段的变化，如果有变化就触发回调函数。同时，useEffect 用于在组件挂载和卸载时添加和删除监听器。

Form.useWatch 的参数包括需要监听的表单字段 fields、回调函数 callback 和依赖项 dependencies。当 fields 或 dependencies 发生改变时，useEffect 会重新执行，重新添加和删除监听器。

需要注意的是，Form.useWatch 只是一个简单的封装，具体的实现逻辑在 form.watch 中，包括如何监听表单字段变化、如何触发回调函数等。

相关问题

react项目中，如何使用antd的Form.useWatch将Form.list内的表单组件关联起来？

在React项目中，可以使用antd的Form.useWatch来关联Form.list内的表单组件。具体步骤如下：

1. 首先，需要在组件中引入useForm和useWatch函数：

import { Form, Input, Button, Space } from 'antd';
import { useForm, useWatch } from 'antd/lib/form/Form';

2. 然后，在组件中定义表单的初始值和表单项的配置：

const initialValues = {
  list: [{ name: 'Alice', age: 18 }, { name: 'Bob', age: 20 }],
};

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

3. 接下来，在组件中使用Form.useForm来创建一个表单实例，并将初始值和表单项的配置传入：

const [form] = useForm({
  initialValues,
  ...layout,
});

4. 然后，在组件中使用Form.list来渲染表单项，并将表单实例和表单项的配置传入：

<Form.List name="list">
  {(fields, { add, remove }) => {
    // 使用useWatch监听表单项的变化
    useWatch({
      form,
      name: ['list'],
      onChange: () => {
        console.log('form changed:', form.getFieldValue('list'));
      },
    });

    return (
      <div>
        {fields.map((field) => (
          <Space key={field.key} align="baseline">
            <Form.Item
              {...field}
              name={[field.name, 'name']}
              fieldKey={[field.fieldKey, 'name']}
              rules={[{ required: true, message: 'Missing name' }]}
            >
              <Input placeholder="Name" />
            </Form.Item>
            <Form.Item
              {...field}
              name={[field.name, 'age']}
              fieldKey={[field.fieldKey, 'age']}
              rules={[{ required: true, message: 'Missing age' }]}
            >
              <Input placeholder="Age" />
            </Form.Item>
            <Button onClick={() => remove(field.name)}>Remove</Button>
          </Space>
        ))}
        <Button onClick={() => add()}>Add</Button>
      </div>
    );
  }}
</Form.List>

5. 最后，可以在表单项的onChange回调函数中监听表单项的变化，以便在表单项值发生变化时执行相关操作。

总之，使用antd的Form.useWatch来关联Form.list内的表单组件，可以方便地监听表单项的变化并执行相关操作。

在react项目中，如何使用antd的Form组件中的form.getFeildValue替换Form.useWatch?

在 Ant Design 的 Form 组件中，可以使用 `form.getFieldValue` 方法来获取表单项的值，替代 `Form.useWatch`。

具体使用方法如下：

首先需要在组件中引入 `Form` 和 `Input` 组件：

import { Form, Input } from 'antd';

然后在组件中使用 `Form.useForm` 方法创建表单实例：

const [form] = Form.useForm();

接着可以在组件中使用 `form.getFieldValue` 方法来获取表单项的值：

const handleSubmit = () => {
  const { username, password } = form.getFieldsValue();
  // 处理表单数据
}

如果要监听表单项值的变化，可以使用 `form.setFieldsValue` 方法来设置表单项值，然后在组件中使用 `form.getFieldValue` 方法获取值。

const handleChange = (value) => {
  form.setFieldsValue({ username: value });
  const username = form.getFieldValue('username');
  // 处理表单数据
}

需要注意的是，`form.getFieldValue` 方法返回的是表单项的当前值，而不是表单项值的变化。如果需要监听表单项值的变化，可以通过 `form.setFieldsValue` 方法来设置表单项值，然后在组件中使用 `form.getFieldValue` 方法获取值。