下面是一个示例代码,演示了如何使用Antd的多选选项组件,并从搜索字段中删除条目:
import React, { useState } from 'react';
import { Select } from 'antd';
const { Option } = Select;
const options = ['选项1', '选项2', '选项3', '选项4'];
const App = () => {
const [selectedOptions, setSelectedOptions] = useState([]);
const handleSearch = (value) => {
// 在这里过滤掉已选择的选项
const filteredOptions = options.filter((option) => !selectedOptions.includes(option));
// 返回匹配的选项
return filteredOptions.filter((option) => option.toLowerCase().includes(value.toLowerCase()));
};
const handleChange = (value) => {
setSelectedOptions(value);
};
return (
);
};
export default App;
在上面的代码中,我们使用了Antd的Select
组件,并将其mode
属性设置为multiple
,以支持多选。我们还使用了一个状态变量selectedOptions
来跟踪已选择的选项。
handleSearch
函数用于根据搜索字段过滤出匹配的选项。我们首先使用filter
方法过滤掉已选择的选项,然后再使用filter
方法根据搜索字段进行匹配。
handleChange
函数用于更新已选择的选项列表。
最后,我们将选项渲染为Option
组件,并在Select
组件中使用它们。