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

相关推荐
萌萌哒草头将军4 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中4 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊5 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj5 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝5 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3115 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion5 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜5 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾6 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*6 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm