form.list是否可以上下移动
时间: 2023-08-13 10:03:49 浏览: 59
是的,form.list可以实现上下移动表单项的功能。可以通过antd的Form.List中提供的一个`move`方法来实现。
具体实现方法如下:
1. 在 Form.List 中添加“上移”和“下移”按钮,同时给按钮添加一个点击事件处理函数。
```jsx
<Form.List name="users">
{(fields, { add, remove, move }) => (
<>
{fields.map((field, index) => (
<div key={field.key}>
<Form.Item
{...field}
name={[field.name, 'name']}
fieldKey={[field.fieldKey, 'name']}
rules={[{ required: true, message: 'Missing user name' }]}
>
<Input placeholder="User name" />
</Form.Item>
<Button onClick={() => move(index, index - 1)} disabled={index === 0}>
上移
</Button>
<Button onClick={() => move(index, index + 1)} disabled={index === fields.length - 1}>
下移
</Button>
<Button onClick={() => remove(field.name)}>删除</Button>
</div>
))}
<Button onClick={() => add()}>添加用户</Button>
</>
)}
</Form.List>
```
2. 在点击事件处理函数中,调用 Form.List 提供的 move 方法来实现上下移动表单项的功能。
```jsx
<Button onClick={() => move(index, index - 1)} disabled={index === 0}>
上移
</Button>
<Button onClick={() => move(index, index + 1)} disabled={index === fields.length - 1}>
下移
</Button>
```
在上面的代码中,我们通过传递当前表单项的索引和目标位置的索引来调用 move 方法。如果当前表单项已经处于顶部或底部,则禁用相应的按钮。
这样,我们就可以实现在 Form.List 中上下移动表单项的功能了。