要实现此功能,需要使用Ant Design的Form组件和FieldArray组件。FieldArray是Field组件的一个集合,用于在表单中生成多个字段。
下面是一个示例代码,演示如何使用Ant Design表单实现动态添加和删除输入框的功能:
import { Form, Input, Button } from 'antd';
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
const DynamicForm = () => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Received values of form:', values);
};
return (
{(fields, { add, remove }) => (
<>
{fields.map((field, index) => (
))}
>
)}
);
};
export default DynamicForm;
该组件包含一个Form组件和Form.List组件。Form.List组件通过其name属性指定要操作的字段集合的名称,其中包含多个字段。在示例中,该字段集合名为“users”。
在return函数中,我们使用Form.List组件返回一个fields数组,该数组包含每个字段的属性名和其他信息。我们使用该数组在循环中渲染每个字段,同时为每个字段添加删除按钮。
{fields.map((field, index) => (