C19

可搜索组合组件

手机上可以运行，但建议在电脑上完成代码练习。

编辑器加载中…

预览

点击「运行」在隔离沙箱中预览

任务说明

React 沙箱

实现可搜索的选择框：placeholder「选择讲师」的输入框实时过滤讲师列表；键盘 ArrowDown 移动高亮（显示为「▶ 讲师名」，跳过禁用项）、Enter 选中高亮项；点击选项也可选中；禁用项（赵四·暂不可约）不可被点击或键盘提交；无匹配时显示「无匹配讲师」。选中后显示「已选：X」且输入框值为 X。

要求

输入「梅」只剩韩梅梅可选；输入「zzz」显示「无匹配讲师」
连续三次 ArrowDown 依次高亮李雷 → 韩梅梅 → 王五（跳过禁用的赵四），按 Enter 后显示「已选：王五」且输入框值为「王五」
过滤到只剩赵四时：ArrowDown 不产生高亮，Enter 与点击都不会出现「已选：赵四」
点击选项可选中；被禁用的选项按钮带 disabled 属性

R15 受控与非受控输入 R45 可复用组件 API

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

可搜索组合组件

Command Palette

可搜索组合组件