要使用form.list组件,需要先导入form模块,并使用form.list方法创建一个表单列表。

下面是一个使用form.list的示例:

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

const DynamicForm = form.list()(Form);

const MyForm = () => {
  const onFinish = (values: any) => {
    console.log('Received values of form:', values);
  };

  return (
    <DynamicForm name="dynamic_form_item" onFinish={onFinish}>
      {(fields, { add, remove }) => (
        <div>
          {fields.map((field, index) => (
            <Form.Item
              {...field}
              name={[field.name, 'input']}
              fieldKey={[field.fieldKey, 'input']}
              rules={[{ required: true, message: 'Missing input' }]}
            >
              <Input placeholder="Input" />
            </Form.Item>
          ))}
          <Form.Item>
            <Button type="dashed" onClick={() => add()} block>
              Add field
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </div>
      )}
    </DynamicForm>
  );
};

export default MyForm;

在上面的示例中,form.list()方法用于将Form组件包装成一个带有表单列表功能的组件DynamicForm。然后在DynamicForm组件中,使用{(fields, { add, remove }) => ()}的形式来渲染表单列表。fields参数是一个数组,包含了表单列表的所有字段的信息。add函数用于添加新的字段,remove函数用于移除指定的字段。

在示例中,每个字段都使用Form.Item组件来包裹Input组件,通过{...field}将字段的属性传递给Form.Item组件。每个字段都有一个name属性用于标识字段的唯一性。

最后,使用DynamicForm组件作为整个表单的根组件,并在Form.Item中使用add函数和remove函数来添加和移除字段


原文地址: http://www.cveoy.top/t/topic/iX0P 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录