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

相关推荐
持久的棒棒君23 分钟前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆2 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz3 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou03 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干3 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大4 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu4 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端4 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao4 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫4 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor