Form.Item中判断其他Form.Item的值

在 Ant Design 的 Form 组件中，如果需要在某个 Form.Item 里根据其他 Form.Item 的值进行动态逻辑判断（例如显示/隐藏、禁用/启用、动态校验等），可以使用以下几种方法：

---

方法 1：使用 Form.Item 的 dependencies + shouldUpdate

适用于 监听其他字段变化并重新渲染当前表单项。

示例：B 字段依赖 A 字段的值

import { Form, Input } from 'antd';

const MyForm = () => {
  return (
    <Form>
      <Form.Item name="fieldA" label="字段A">
        <Input />
      </Form.Item>

      {/* 当 fieldA 变化时，重新渲染 fieldB */}
      <Form.Item
        name="fieldB"
        label="字段B"
        dependencies={['fieldA']}
        shouldUpdate={(prevValues, currentValues) => 
          prevValues.fieldA !== currentValues.fieldA
        }
      >
        {({ getFieldValue }) => {
          const fieldAValue = getFieldValue('fieldA');
          return (
            <Input 
              disabled={!fieldAValue}  // 如果 fieldA 为空，禁用 fieldB
              placeholder={fieldAValue ? '请输入B' : '请先填写A'}
            />
          );
        }}
      </Form.Item>
    </Form>
  );
};

关键点

• dependencies={['fieldA']}：声明依赖的字段名。
• shouldUpdate：决定是否重新渲染（返回 true 时更新）。
• getFieldValue()：获取其他字段的值。

---

方法 2：使用 Form.useWatch (Ant Design 4.20.0+)

适用于 在组件内监听字段值变化 （无需 shouldUpdate）。

示例：动态显示提示信息

import { Form, Input, Typography } from 'antd';

const MyForm = () => {
  const fieldAValue = Form.useWatch('fieldA', Form.useForm()[0]);

  return (
    <Form>
      <Form.Item name="fieldA" label="字段A">
        <Input />
      </Form.Item>

      <Form.Item name="fieldB" label="字段B">
        <Input />
      </Form.Item>

      {/* 根据 fieldA 的值显示提示 */}
      {fieldAValue && (
        <Typography.Text type="warning">
          当前A的值是: {fieldAValue}
        </Typography.Text>
      )}
    </Form>
  );
};

优点

• 代码更简洁，无需手动管理依赖。
• 适合复杂逻辑（如联动多个字段）。

---

方法 3：自定义校验规则（依赖其他字段）

适用于 动态校验规则（例如密码确认）。

示例：密码一致性校验

<Form.Item
  name="password"
  label="密码"
  rules={[{ required: true }]}
>
  <Input.Password />
</Form.Item>

<Form.Item
  name="confirmPassword"
  label="确认密码"
  dependencies={['password']}
  rules={[
    { required: true },
    ({ getFieldValue }) => ({
      validator(_, value) {
        if (!value || getFieldValue('password') === value) {
          return Promise.resolve();
        }
        return Promise.reject('两次密码不一致！');
      },
    }),
  ]}
>
  <Input.Password />
</Form.Item>

关键点

• dependencies：声明依赖的字段（这里是 password）。
• 校验函数中通过 getFieldValue 获取其他字段值。

---

方法 4：使用 useForm 实例手动控制

适用于 需要编程式干预表单逻辑（如提交时校验）。

示例：提交时检查字段A是否满足条件

import { Form, Input, Button } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const handleSubmit = () => {
    const fieldAValue = form.getFieldValue('fieldA');
    if (fieldAValue !== '允许的值') {
      alert('字段A不符合条件！');
      return;
    }
    form.submit();
  };

  return (
    <Form form={form}>
      <Form.Item name="fieldA" label="字段A">
        <Input />
      </Form.Item>
      <Button onClick={handleSubmit}>提交</Button>
    </Form>
  );
};

---

常见场景总结

场景	推荐方法
字段联动（显示/隐藏/禁用）	dependencies + shouldUpdate
动态提示/UI更新	Form.useWatch
动态校验规则	dependencies + 自定义 validator
复杂编程逻辑	useForm 实例

---

注意事项

1. 性能优化 ：
   • 避免在 shouldUpdate 中监听过多字段（可能引发频繁渲染）。
   • 对大型表单优先使用 Form.useWatch。
2. Ant Design 版本 ：
   • useWatch 需 Ant Design ≥ 4.20.0。
3. TypeScript 类型 ：

   • 使用 FormInstance 类型标注表单实例：

     const [form] = Form.useForm<{ fieldA: string; fieldB: number }>();

---

通过以上方法，可以灵活实现 Form.Item 之间的值判断与联动逻辑！