EXT 下拉多选带搜索组件
时间: 2023-07-26 13:03:34 浏览: 62
可以使用Ant Design的Select组件,结合Select.Option和Input.Search实现下拉多选带搜索的功能。
示例代码:
```
import React, { useState } from 'react';
import { Select, Input } from 'antd';
const { Option } = Select;
const options = [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
{ label: '选项4', value: '4' },
{ label: '选项5', value: '5' },
{ label: '选项6', value: '6' },
];
function EXTSelect() {
const [selectedValues, setSelectedValues] = useState([]);
const handleSelectChange = (values) => {
setSelectedValues(values);
};
return (
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="请选择"
value={selectedValues}
onChange={handleSelectChange}
filterOption={(input, option) =>
option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
showSearch
>
{options.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
);
}
export default EXTSelect;
```
这个组件可以实现多选、清除已选、支持搜索等功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)