AntDesign提供了Form组件,可以用于构建动态表单。下面是一个简单的示例代码,演示如何使用AntDesign的动态表单功能:
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
const DynamicForm = () => {
const [fields, setFields] = useState([]);
const addField = () => {
const newFields = [...fields, { name: `field${fields.length + 1}`, value: '' }];
setFields(newFields);
};
const removeField = (index) => {
const newFields = fields.filter((field, i) => i !== index);
setFields(newFields);
};
return (
<Form>
{fields.map((field, index) => (
<Form.Item key={index}>
<Input
value={field.value}
onChange={(e) => {
const newFields = [...fields];
newFields[index].value = e.target.value;
setFields(newFields);
}}
/>
<Button onClick={() => removeField(index)}>Remove</Button>
</Form.Item>
))}
<Button onClick={addField}>Add Field</Button>
</Form>
);
};
export default DynamicForm;
在这个示例中,我们使用useState来管理表单字段的状态。通过调用addField函数,可以在表单中动态添加新的字段;通过调用removeField函数,可以移除指定索引的字段。
通过这种方式,我们可以轻松地实现动态表单功能,并根据需求扩展和修改表单的结构。AntDesign的Form组件提供了丰富的功能和样式,可以帮助我们快速构建出漂亮且功能强大的表单。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。