在ant-design表中传递多个项可以通过以下步骤实现:
以下是一个示例代码:
import React, { useState } from 'react';
import { Form, Select, Button } from 'antd';
const { Option } = Select;
const MyForm = () => {
const [selectedItems, setSelectedItems] = useState([]);
const handleSelectChange = (value) => {
setSelectedItems(value);
};
const handleSubmit = () => {
// 在这里处理提交表单的逻辑,可以使用selectedItems变量获取所选中的多个项的值
};
return (
<Form layout="vertical">
<Form.Item label="多个项">
<Select
mode="multiple"
placeholder="请选择多个项"
onChange={handleSelectChange}
value={selectedItems}
>
<Option value="item1">项1</Option>
<Option value="item2">项2</Option>
<Option value="item3">项3</Option>
</Select>
</Form.Item>
<Form.Item>
<Button type="primary" onClick={handleSubmit}>提交</Button>
</Form.Item>
</Form>
);
};
export default MyForm;
在上述示例中,我们使用了ant-design的Select组件,并设置mode属性为"multiple",以支持多选。通过onChange事件,我们可以获取到所选中的多个项的值,并将其存储在selectedItems状态变量中。在提交表单时,可以通过selectedItems变量获取所选中的多个项的值,然后进行相应的处理。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云