如何在Ant Design动态Form.List外部触发add方法添加表单项？

要在Form组件外部调用Form.List的add方法，最直接的方式是用React的useRef钩子捕获Form.List内部的add函数，具体实现步骤如下：

• 引入useRef并创建一个用于存储add方法的引用
• 在Form.List的回调函数中，将内部的add方法赋值给ref的current属性
• 外部按钮的点击事件中，调用ref中存储的add方法

完整代码示例 #

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

const MyForm = () => {
  const [form] = Form.useForm();
  const initialValues = { /* 你的表单初始值 */ };
  // 创建ref存储Form.List的add方法
  const listAddRef = useRef(null);

  const onSubmit = (values) => {
    console.log('表单提交值:', values);
  };

  return (
    <>
      <Form form={form} initialValues={initialValues} onFinish={onSubmit}>
        <Form.List>
          {(fields, { add, remove }) => {
            // 将add方法存入ref，供外部调用
            listAddRef.current = add;
            return (
              <div>
                {fields.map(field => (
                  <Form.Item {...field} key={field.key}>
                    <Input placeholder="输入内容" />
                  </Form.Item>
                ))}
              </div>
            );
          }}
        </Form.List>
        {/* Form组件内部、Form.List外部的按钮 */}
        <Button type="link" onClick={() => listAddRef.current?.()}>
          添加项（Form内部）
        </Button>
      </Form>
      {/* 完全在Form组件外部的按钮 */}
      <Button type="link" onClick={() => listAddRef.current?.()}>
        添加项（Form外部）
      </Button>
    </>
  );
};

export default MyForm;

注意事项 #

• 使用?.可选链操作符是为了避免组件初始化阶段ref尚未赋值时出现报错
• Form.List每次渲染都会更新ref中的add方法，确保调用的是最新的实例方法

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