在Ant Design中,表单组件通常是以字段的方式进行使用,而不是以标签的方式。如果需要实现标签式表单,可以通过一些简单的方法来实现。
以下是一个示例的解决方法:
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
const TagForm = () => {
const [tags, setTags] = useState([]);
const addTag = () => {
const newTag = `Tag ${tags.length + 1}`;
setTags([...tags, newTag]);
};
const removeTag = (tag) => {
const updatedTags = tags.filter((t) => t !== tag);
setTags(updatedTags);
};
const handleSubmit = (values) => {
console.log('Form values:', values);
};
return (
))}
);
};
export default TagForm;
这个示例中,我们使用了Ant Design的Form
、Input
和Button
组件来构建标签式表单。
在TagForm
组件中,我们使用useState
钩子来保存标签的状态。tags
数组用于保存已添加的标签。
在addTag
函数中,我们通过添加一个新的标签来更新tags
数组。
在removeTag
函数中,我们通过过滤掉要删除的标签来更新tags
数组。
在handleSubmit
函数中,我们可以获取整个表单的值。
在render
方法中,我们通过map
函数遍历tags
数组,为每个标签生成一个Form.Item
组件,并在label
中显示标签的名称。在每个Form.Item
中,我们使用Input
组件来输入标签的值,并使用Button
组件来删除该标签。
最后,我们添加了一个addTag
按钮来添加新的标签,以及一个Submit
按钮来提交整个表单。
这样,我们就实现了一个简单的标签式表单。