react + antd:AutoComplete 实现既可以自由输入又能下拉选择

在工作中遇到一个需求,既能下拉选择,有要求可以自由输入没有的选项。

刚开始考虑使用 Select 组件,发现只有多选(mode="tags")的时候才能随意输入内容,但多选又不符合当前的业务需求。

在犹豫要不要自定义一个组件来实现业务需求时,发现了 AutoComplete 组件,完美实现需求。

AutoCompete 自动完成

  • 适用情况
    • 需要一个输入框而不是选择器
    • 需要输入建议 / 辅助提示(另一种形式的选项)
  • 代码示例
js 复制代码
const Example = () => {
  const options = ['python', 'Java'];

  return (
  	<AutoComplete 
	  options={options.map(item => ({ label: item, value: item }))}
	/>
  )
}

需要注意的是:AutoComplete 组件输入框中回填的值为 options 中的 value 而不是 label,如果存在 label 和 value 不一致的情况则需要额外处理。

相关推荐
拾光拾趣录4 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00004 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl5 分钟前
深度剖析Kafka读写机制
前端
FogLetter6 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan6 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan7 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan9 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录9 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee9 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我10 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html