在Ant Design的Form.List中,可以使用声明方式对字段进行排序。以下是一个示例代码:
import React from 'react';
import { Form, Input, Button } from 'antd';
const MyForm = () => {
const onFinish = values => {
console.log('Received values of form:', values);
};
return (
{(fields, { add, remove }) => {
return (
{fields.map((field, index) => (
{fields.length > 1 ? (
) : null}
))}
);
}}
);
};
export default MyForm;
在上面的代码中,我们使用了Form.List
组件来动态渲染表单字段。通过fields.map
方法,我们可以遍历渲染字段列表,并为每个字段提供一个排序功能。
在每个字段的Form.Item
中,我们可以通过field.key
来获取当前字段的唯一标识,并将其作为key
属性传递给Form.Item
组件。
通过add
和remove
方法,我们可以动态添加或删除字段。在添加和删除字段时,我们可以根据需要对字段进行排序。
最后,通过onFinish
方法,我们可以获取表单的所有值并进行提交处理。
希望这个示例能够帮助到你!