当前位置：首页 > news >正文

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

news 来源：原创 2025/8/28 13:53:31

话不多说，直接上效果和代码
效果图一：
在这里插入图片描述

效果图二：

在这里插入图片描述

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 (<divclassName="specs-settings-popover"onBlur={() => {this.setState({currentStyleId: undefined,});}}><divonMouseDown={(e) => {e.preventDefault();return false;}}><Selectstyle={{ width: '300px' }}placeholder={language.getText('selectPlease')}mode="multiple"autoClearSearchValueshowSearchfilterOption={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={() => (<MenuclassName="select-menu"onClick={async (e: any) => {this.selectedStyleOption(e.key, item.id);}}>{!hasSearchKeyword && item.optionKeyword && (<Menu.Itemkey={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.Itemkey={attribute.id}className="select-menu-item">{attribute.name}{currentSelectedOptionIds.includes(attribute.id + '') && (<Icontype="check"style={{ marginLeft: '5px' }}/>)}</Menu.Item>);})}</Menu>)}>{item.options &&item.options.map((attribute: any) => {return (<Select.Optionkey={attribute.id}value={String(attribute.id)}>{attribute.name}</Select.Option>);})}</Select></div><ButtonclassName="popover-btn"type="default"onClick={() => {this.toggleOptionPopover(item.id);}}>{language.getText('common.cancel')}</Button><ButtonclassName="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

相关文章：