AntDesign下,Select内嵌Menu标签,做一个多选下拉框,既可以搜索,还可以选择下拉项

话不多说,直接上效果和代码
效果图一:

效果图二:

bash 复制代码
renderAddStyleOption = (item: any) => {
   const { value } = this.props;
   const { currentSelectedOptionIds, currentStyleId } = this.state;
   const styleSettings = value?.styleSettings;

   const newStyleSettings = styleSettings && styleSettings.length ? styleSettings : [];
   if (item) {
       const hasSearchKeyword = find([...item.allOptions, ...item.options], {
           name: item.optionKeyword,
       });
       return (
           <div
               className="specs-settings-popover"
               onBlur={() => {
                   this.setState({
                       currentStyleId: undefined,
                   });
               }}
           >
               <div
                   onMouseDown={(e) => {
                       e.preventDefault();
                       return false;
                   }}
               >
                   <Select
                       style={{ width: '300px' }}
                       placeholder={language.getText('selectPlease')}
                       mode="multiple"
                       autoClearSearchValue
                       showSearch
                       filterOption={false}
                       onChange={(selectedValues: any) => {
                           this.setState({
                               currentSelectedOptionIds: selectedValues,
                           });
                       }}
                       value={currentSelectedOptionIds}
                       onSearch={(keyword: string) => {
                           this.onSearch(item.id, newStyleSettings, keyword);
                       }}
                       onFocus={() => {
                           this.onSearch(item.id, newStyleSettings);
                       }}
                       open={currentStyleId === item.id}
                       onDropdownVisibleChange={() => {
                           this.setState({
                               currentStyleId: item.id,
                           });
                       }}
                       dropdownRender={() => (
                           <Menu
                               className="select-menu"
                               onClick={async (e: any) => {
                                   this.selectedStyleOption(e.key, item.id);
                               }}
                           >
                               {!hasSearchKeyword && item.optionKeyword && (
                                   <Menu.Item
                                       key={item.optionKeyword}
                                       className="add-menu-item"
                                   >
                                       <Icon type="plus" style={{ marginRight: '5px' }} />
                                       {item.optionKeyword}
                                   </Menu.Item>
                               )}
                               {item.options &&
                                   item.options.map((attribute: any) => {
                                       return (
                                           <Menu.Item
                                               key={attribute.id}
                                               className="select-menu-item"
                                           >
                                               {attribute.name}
                                               {currentSelectedOptionIds.includes(
                                                   attribute.id + ''
                                               ) && (
                                                   <Icon
                                                       type="check"
                                                       style={{ marginLeft: '5px' }}
                                                   />
                                               )}
                                           </Menu.Item>
                                       );
                                   })}
                           </Menu>
                       )}
                   >
                       {item.options &&
                           item.options.map((attribute: any) => {
                               return (
                                   <Select.Option
                                       key={attribute.id}
                                       value={String(attribute.id)}
                                   >
                                       {attribute.name}
                                   </Select.Option>
                               );
                           })}
                   </Select>
               </div>
               <Button
                   className="popover-btn"
                   type="default"
                   onClick={() => {
                       this.toggleOptionPopover(item.id);
                   }}
               >
                   {language.getText('common.cancel')}
               </Button>
               <Button
                   className="popover-btn"
                   type="primary"
                   onClick={() => {
                       this.addStyleOption(item.id);
                   }}
               >
                   {language.getText('common.add')}
               </Button>
           </div>
       );
   } else {
       return null;
   }
};

直接说重点,时间问题,不单纯出简单代码为大家说明了

1.关于下拉项事件的加载,可以通过onSearch和onFocus
获取你们的数据源,其中onSearch会返回name也就是select输入框的关键字,可以与后端接口请求获取

2.为什么使用Menu?是发现在Select输入关键字,下拉项出现"新增关键字"选项时,即使不点也会默认选中第一项,而"新增关键字"还未加入数据库,id获取不到,因此使用了Menu来控制到底是不是用户手动点的,

(也有人想要这种简便操作,就是点击"新增关键字",移除select也仍然加入数据库这种交互的话,那直接用select无需嵌套Menu可做到。我的需求是必须是用户手动点击下拉项才可以添加到数据库,避免一些伪操作数据的产生,大家自行判断~)

3.使用Menu大家应该也会遇到其他的卡点,可以移步到我上次写的一个博客,里面有详细写遇到的问题~
https://blog.csdn.net/weixin_43517190/article/details/147008156?spm=1001.2014.3001.5501

相关推荐
ElasticPDF-新国产PDF编辑器14 分钟前
Vue 项目 PDF 批注插件库在线版 API 示例教程
前端·vue.js·pdf
拉不动的猪20 分钟前
react基础2
前端·javascript·面试
kovlistudio20 分钟前
红宝书第二十九讲:详解编辑器和IDE:VS Code与WebStorm
开发语言·前端·javascript·ide·学习·编辑器·webstorm
拉不动的猪23 分钟前
react基础1
前端·javascript·面试
鱼樱前端1 小时前
Vite 工程化深度解析与最佳实践
前端·javascript
鱼樱前端1 小时前
Webpack 在前端工程化中的核心应用解析-构建老大
前端·javascript
Moment1 小时前
多人协同编辑算法 —— CRDT 算法 🐂🐂🐂
前端·javascript·面试
小付同学呀1 小时前
前端快速入门学习4——CSS盒子模型、浮动、定位
前端·css·学习
OpenTiny社区3 小时前
TinyPro 中后台管理系统使用指南——让页面搭建变得如此简单!
前端·vue.js·开源