antd dependencies

Ant Design (antd) 是一个 React UI 组件库，其依赖包括：

- react：React 库
- react-dom：React 的 DOM 渲染器
- prop-types：React 属性类型检查
- babel-plugin-import：用于按需加载组件和样式的 Babel 插件
- rc-util：React 实用工具库
- moment：JavaScript 日期处理库
- lodash：JavaScript 实用工具库

当然，还有一些其他的依赖，但以上是主要的依赖。

相关问题

antd form dependencies 自动触发更新实例

如果您使用的是 Ant Design 的 Form 组件，您可以通过设置 getFieldDecorator 的第三个参数 options 来实现表单项之间的依赖关系。具体来说，options 中的 rules 属性可以接收一个数组，用于定义该表单项依赖的其他表单项的值，只要这些值发生变化，该表单项就会自动更新。例如：

<Form.Item label="A">
  {getFieldDecorator("a", {
    rules: [
      {
        validator: (rule, value, callback) => {
          if (value === getFieldValue("b")) {
            callback("A 和 B 的值不能相同");
          } else {
            callback();
          }
        },
      },
    ],
  })(<Input />)}
</Form.Item>
<Form.Item label="B">
  {getFieldDecorator("b")(<Input />)}
</Form.Item>

在上面的例子中，表单项 A 的规则中定义了一个 validator，用于检查 A 的值是否等于 B 的值，如果相等就会提示错误信息。这里的关键是在 validator 中使用了 getFieldValue 函数来获取表单项 B 的值，从而实现了 A 和 B 的依赖关系。当表单项 B 的值发生变化时，表单项 A 会自动更新，重新执行 validator，并根据新的 B 值来更新自己的状态。

antd 4.0版本 Form dependencies 自动触发更新实例

在 Ant Design 4.0 版本中，Form 组件的 getFieldDecorator API 已经被废弃，取而代之的是 useForm Hook，它提供了一种新的方式来实现表单项之间的依赖关系。

具体来说，您可以在 useForm Hook 中使用 watch 函数来监听表单项的值，并在表单项值发生变化时触发相应的回调函数。例如：

import React from "react";
import { useForm } from "antd/lib/form/Form";
import { Input } from "antd";

function App() {
  const [form] = useForm();

  const handleAChange = (value) => {
    if (value === form.getFieldValue("b")) {
      form.setFields([
        {
          name: "a",
          errors: ["A 和 B 的值不能相同"],
        },
      ]);
    } else {
      form.setFieldsValue({ a: value });
      form.setFields([
        {
          name: "a",
          errors: [],
        },
      ]);
    }
  };

  const handleBChange = (value) => {
    if (value === form.getFieldValue("a")) {
      form.setFields([
        {
          name: "b",
          errors: ["A 和 B 的值不能相同"],
        },
      ]);
    } else {
      form.setFieldsValue({ b: value });
      form.setFields([
        {
          name: "b",
          errors: [],
        },
      ]);
    }
  };

  const watchA = form.watch("a");
  const watchB = form.watch("b");

  React.useEffect(() => {
    if (watchA !== undefined && watchB !== undefined) {
      if (watchA === watchB) {
        handleAChange(watchA);
      }
    }
  }, [watchA, watchB]);

  React.useEffect(() => {
    if (watchA !== undefined && watchB !== undefined) {
      if (watchA === watchB) {
        handleBChange(watchB);
      }
    }
  }, [watchA, watchB]);

  return (
    <form>
      <Input name="a" onChange={(e) => form.setFieldsValue({ a: e.target.value })} />
      <Input name="b" onChange={(e) => form.setFieldsValue({ b: e.target.value })} />
    </form>
  );
}

在上面的例子中，我们使用了 useForm Hook 来创建一个表单实例，并分别定义了 handleAChange 和 handleBChange 两个回调函数，用于处理表单项 A 和 B 的值变化。然后，我们使用 watch 函数来监听 A 和 B 的值，并在值发生变化时触发相应的回调函数。在回调函数中，我们使用 setFieldsValue 函数来更新表单项的值，并使用 setFields 函数来更新表单项的错误信息。最后，我们在 useEffect Hook 中监听 watchA 和 watchB 的变化，并调用相应的回调函数来处理依赖关系。

需要注意的是，由于 watch 函数只能监听具有 name 属性的表单项，因此我们需要在 Input 组件中添加 name 属性来使其能够被 watch 函数监听。此外，由于 useForm Hook 返回的表单实例是一个 ref 对象，因此我们需要使用 form.getFieldValue 和 form.setFieldsValue 函数来获取和更新表单项的值。