React中使用AntD为表单输入框动态添加验证规则

直接通过form.getFieldInstance修改组件实例的rules属性不会生效，因为Form的验证规则是维护在Form实例的内部状态中，而非绑定在输入组件实例上，修改组件实例的属性无法同步到表单的规则体系里。

以下是几种可行的解决思路：

• 使用Form实例的setFieldRules方法（Ant Design v4及以上版本支持），这是官方提供的动态修改字段规则的标准方式：

  const [form] = Form.useForm();
  
  form.setFieldRules('username', [
    {
      required: true,
      message: '请输入用户名！',
    },
  ]);
  

• 结合useEffect确保初始化完成后设置规则，如果是在组件挂载阶段设置，需要等待Form实例初始化完成：

  import { useEffect } from 'react';
  import { Form, Input } from 'antd';
  
  const MyForm = () => {
    const [form] = Form.useForm();
  
    useEffect(() => {
      form.setFieldRules('username', [
        {
          required: true,
          message: '请输入用户名！',
        },
      ]);
    }, [form]);
  
    return (
      <Form form={form}>
        <Form.Item name="username">
          <Input placeholder="用户名" />
        </Form.Item>
      </Form>
    );
  };
  

• 通过状态绑定Form.Item的rules属性，适合需要根据外部条件动态调整规则的场景，这种方式更直观且易维护：

  import { useState } from 'react';
  import { Form, Input, Button } from 'antd';
  
  const MyForm = () => {
    const [form] = Form.useForm();
    const [usernameRules, setUsernameRules] = useState([]);
  
    const enableValidation = () => {
      setUsernameRules([
        {
          required: true,
          message: '请输入用户名！',
        },
      ]);
    };
  
    return (
      <Form form={form}>
        <Form.Item name="username" rules={usernameRules}>
          <Input placeholder="用户名" />
        </Form.Item>
        <Button onClick={enableValidation}>启用用户名验证</Button>
      </Form>
    );
  };
  

内容的提问来源于stack exchange，提问作者famadori