DEV Community
·
选择下拉菜单 + 搜索框 + 可清除选项（React & Shadcn）
💡
原文英文，约1300词，阅读约需5分钟。
📝
内容提要
本文介绍了如何使用Shadcn的UI组件创建一个自定义的选择下拉组件，支持搜索和清除选项，提升用户体验。
🎯
关键要点
-
Shadcn提供了一套美观的UI组件，常用的组件之一是选择器。
-
Shadcn的选择器缺乏搜索功能和清除选项的能力。
-
本文介绍了如何实现一个自定义的选择下拉组件，支持搜索和清除选项。
-
创建基本下拉组件，显示选项列表和选中项的勾选标记。
-
集成搜索功能，使用<CommandInput>实现内置搜索能力。
-
添加清除选项的按钮，允许用户清除已选择的值。
-
为下拉组件添加触发器，以便切换下拉的打开和关闭状态。
-
构建一个功能完整的<InputSelect>组件，支持搜索和清除选项。
-
可选的自定义功能，允许将<InputSelectTrigger>提取为单独的组件。
-
提供示例代码和演示链接，便于用户参考和使用。
❓
延伸问答
如何使用Shadcn创建自定义选择下拉组件？
可以通过实现一个支持搜索和清除选项的自定义选择下拉组件来创建，使用Shadcn的UI组件如<Command>和<Popover>。
Shadcn的选择器缺少哪些功能？
Shadcn的选择器缺乏搜索功能和清除选项的能力。
如何为选择下拉组件添加搜索功能？
可以通过集成<CommandInput>来实现内置搜索能力，并使用<CommandEmpty>显示没有结果时的提示信息。
如何在选择下拉组件中添加清除选项的按钮？
可以添加一个按钮，调用onClearAllOptions函数来清除已选择的值。
如何构建一个完整的<InputSelect>组件？
构建<InputSelect>组件时，需要管理选中值的状态、下拉的打开状态，并实现选项选择和清除功能。
可以如何自定义<InputSelect>组件的触发器？
可以将<InputSelectTrigger>提取为单独的组件，以提供额外的自定义功能。
➡️
