以下是一个使用Ant Design的动态表单和预设标签的示例代码:
import React, { useState } from 'react';
import { Form, Input, Button, Tag } from 'antd';
const initialValues = {
name: '',
tags: [],
};
const DynamicForm = () => {
const [form] = Form.useForm();
const [tags, setTags] = useState([]);
const onFinish = (values) => {
console.log('Form values:', values);
};
const handleTagClose = (removedTag) => {
const updatedTags = tags.filter((tag) => tag !== removedTag);
setTags(updatedTags);
form.setFieldsValue({ tags: updatedTags });
};
const handleTagCreate = () => {
const newTag = form.getFieldValue('newTag');
const updatedTags = [...tags, newTag];
setTags(updatedTags);
form.setFieldsValue({ tags: updatedTags, newTag: '' });
};
return (
{tags.map((tag) => (
handleTagClose(tag)}
>
{tag}
))}
form.setFieldsValue({ newTag: e.target.value })}
value={form.getFieldValue('newTag')}
/>
);
};
export default DynamicForm;
在这个示例中,我们使用Ant Design的Form
组件创建了一个动态表单。表单中包含了一个文本输入框和一个标签列表。当用户输入一个新的标签时,可以点击“Add”按钮将其添加到标签列表中。用户还可以关闭标签,从而从列表中删除它。
在handleTagCreate
函数中,我们从表单中获取新的标签值,并将其添加到tags
数组中。然后,我们使用setTags
更新tags
状态,并使用form.setFieldsValue
更新tags
字段的值。
在handleTagClose
函数中,我们从tags
数组中删除被关闭的标签,并使用setTags
更新tags
状态。然后,我们使用form.setFieldsValue
更新tags
字段的值。
最后,在onFinish
函数中,我们可以获取到表单的所有值,并在控制台中打印出来。
希望这个示例能帮助到你!