下面是一个使用ANTD动态表单的示例代码,其中包含了初始值的设置:
import React, { useState } from "react";
import { Form, Input, Button } from "antd";
const DynamicForm = () => {
const [form] = Form.useForm();
const [fields, setFields] = useState([]);
const handleAddField = () => {
setFields([...fields, { name: "", age: "" }]);
};
const handleRemoveField = (index) => {
const newFields = [...fields];
newFields.splice(index, 1);
setFields(newFields);
};
const handleFieldChange = (index, field, value) => {
const newFields = [...fields];
newFields[index][field] = value;
setFields(newFields);
};
const handleSubmit = (values) => {
console.log("Submitted values:", values);
};
return (
);
};
export default DynamicForm;
在上述代码中,我们使用useState
来保存动态表单的字段(name和age)。初始时,fields
为空数组。
添加字段的方法handleAddField
会在fields
数组中添加一个空对象,表示新增一个字段。
移除字段的方法handleRemoveField
会从fields
数组中移除指定索引的字段。
字段值改变的方法handleFieldChange
会更新指定索引的字段的相应属性。
表单提交的方法handleSubmit
会打印出所有字段的值。
在表单渲染时,我们使用fields.map
循环渲染所有字段,并为每个字段提供一个删除按钮。通过value
和onChange
属性来绑定字段的值和值的改变方法。
最后,我们添加了一个"Add Field"按钮用于添加新字段,以及一个"Submit"按钮用于提交表单。