如果你遇到了ANT Design的Form.List无法移除元素的问题,解决方法如下:
- 首先,确保你的Form.List的数据源是可变的。比如,将数据源存储在State中。
// 定义初始数据源
const initialData = [
{ name: '小明', age: 20 },
{ name: '小红', age: 18 },
];
// 存储数据源
const [data, setData] = useState(initialData);
- 在Form.List中设置name属性,并将数据源中的每个元素对应到Form.Item中的表单控件中去。
{(fields, { add, remove }) => (
<>
{fields.map(field => (
User #${field.key}}
name={[field.name, 'name']}
fieldKey={[field.fieldKey, 'name']}
rules={[{ required: true, message: '请输入名称' }]}
>
))}
// 添加按钮
>
)}
- 在需要移除元素的时候,通过Form.List提供的remove方法来删除相应的元素。
{(fields, { add, remove }) => (
<>
{fields.map(field => (
User #${field.key}}
name={[field.name, 'name']}
fieldKey={[field.fieldKey, 'name']}
rules={[{ required: true, message: '请输入名称' }]}
>
))}
// 添加按钮
// 删除按钮
>
)}
在这个例子中,删除按钮通过调用remove(0)来删除第一个元素。你也可以根据实际情况来修改这个数字。
通过以上步骤,你就可以成功移除Form.List中的元素了。