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

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

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

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

AutoCompete 自动完成

  • 适用情况
    • 需要一个输入框而不是选择器
    • 需要输入建议 / 辅助提示(另一种形式的选项)
  • 代码示例
const Example = () => {const options = ['python', 'Java'];return (<AutoComplete options={options.map(item => ({ label: item, value: item }))}/>)
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/632673.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu防火墙管理

防火墙管理 防火墙是用于监控和过滤传入和传出网络流量的工具。 它通过定义一组确定是允许还是阻止特定流量的安全规则来工作。 Ubuntu 18.04安装了一个称为UFW的防火墙配置工具。 它是用于管理iptables防火墙规则的用户友好型前端。 它的主要目标是使防火墙的管理变得更容易…

pyqtgraph绘图类

pyqtgraph绘图类 pyqtgraph绘图有四种方法: 方法描述pyqtgraph.plot()创建一个新的QWindow用来绘制数据PlotWidget.plot()在已存在的QWidget上绘制数据PlotItem.plot()在已存在的QWidget上绘制数据GraphicsLayout.addPlot()在网格布局中添加一个绘图 上面四个方法都接收同样…

OpenHarmony应用开发-进程间通讯

版本&#xff1a;v3.2 Beta5 进程模型 OpenHarmony的进程模型如下图所示&#xff1a; 应用中&#xff08;同一包名&#xff09;的所有UIAbility、ServiceExtensionAbility、DataShareExtensionAbility运行在同一个独立进程中&#xff0c;即图中绿色部分的“Main Process”。…

Linux设备驱动开发学习笔记(等待队列,锁,字符驱动程序,设备树,i2C...)

1. 内核工具和辅助函数 1.1宏container_of container_of函数可以通过结构体的成员变量检索出整个结构体 函数原型&#xff1a; /* pointer 指向结构体字段的指针 container_type 结构体类型 container_field 结构体字段名称 返回值是一个指针 */ container_of(pointer, con…

HPsocket 在 C# 中的运用:一款优秀的 socket 通信框架

摘要&#xff1a;本文将为您详细介绍 HPsocket&#xff0c;一款适用于 win32 平台的 socket 通信框架。同时&#xff0c;我们还将探讨如何在 C# 项目中使用 HPsocket&#xff0c;实现网络通信功能。通过本文&#xff0c;您将深入了解 HPsocket 的特点、优势以及在 C# 中的实际应…

在线App封装技术:HTML5的新生命

HTML5封装的魅力所在HTML5带来了丰富的多媒体功能、地理位置服务、离线存储等特性&#xff0c;使得Web应用的体验更加接近原生App。封装HTML5到App中&#xff0c;可以大大缩短开发周期&#xff0c;降低开发成本&#xff0c;并且一次编写&#xff0c;多平台运行&#xff0c;极大…

MySQL面试题 | 15.精选MySQL面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

.NET Core使用SkiaSharp快速生成二维码( 真正跨平台方案)

前言 在.NET 6之前我们一直是使用QRCoder来生成二维码&#xff08;QRCoder是一个非常强大的生成二维码的组件&#xff0c;用到了System.Drawing.Common 包&#xff09;&#xff0c;然后从.NET 6开始&#xff0c;当为非 Windows 操作系统编译引用代码时&#xff0c;平台分析器会…

阿里云服务器配置选择之线下IDC直接映射

阿里云服务器配置CPU内存和ECS实例规格如何选择&#xff1f;主要用于线下IDC直接映射&#xff0c;可以选择第七代云服务器ECS计算型c7、通用型g7或内存型r7实例&#xff0c;企业级独享型云服务器&#xff0c;企业级实例采用固定CPU调度模式&#xff0c;每个vCPU绑定到一个物理C…

外汇天眼:Alpha Group International在2023财年实现营收同比增长12%

Alpha Group International plc&#xff0c;一家为企业和机构提供金融解决方案的公司&#xff0c;今天发布了截至2023财年的贸易更新。 营收增长12%&#xff0c;达到1.1亿英镑&#xff08;2022财年&#xff1a;9830万英镑&#xff09;。 税前利润增长超过140%&#xff0c;达到…

JVM的演变

Java虚拟机&#xff08;JVM&#xff09;是Java语言的核心组成部分&#xff0c;它负责将Java字节码转换为机器码并执行。随着时间的推移&#xff0c;JVM在不同版本的JDK中经历了许多演变和改进。本文将深入浅出地介绍从JDK 7到JDK 21不同主流版本的JVM结构变化及其特性&#xff…

一、RHCE--准备工作

一、RHCE---准备工作 1.修改主机地址&#xff08;由动态IP地址--> 静态IP地址&#xff09;第一种&#xff1a;通过命令行的方式第二种&#xff1a;通过vim编辑器修改配置文件的方式第三种&#xff1a;通过图形化的方式&#xff1a; 2.软件安装3.关闭防火墙4.禁用selinux 1.修…

xhr、jQuery、axios、fetch、vue-resource简单了解和对比

1. xhr 不常用&#xff08;太麻烦&#xff09;&#xff0c;一般进行二次封装&#xff0c;或者使用成型的第三方封装jQuery&#xff0c;axios等。axios和jQuery都是对xhr的封装。 2. jQuery 核心是封装Dom操作&#xff0c;80%的内容都是关于Dom的&#xff0c;Vue和React的使用…

【代码随想录算法训练营-第八天】【字符串】344,541,卡码网:54,151,卡码网:55

344.反转字符串 第一遍 思路 class Solution {public void reverseString(char[] s) {char tmp;for (int i 0, j s.length - 1; i < s.length && j > 0 && i < j; i, j--) {tmp s[i];s[i] s[j];s[j] tmp;}} }541. 反转字符串II 第一遍 思路…

kubernetes 权限控制

RBAC引入了4个顶级资源对象&#xff1a;Role、ClusterRole&#xff1a;角色&#xff0c;用于指定一组权限&#xff1b;RoleBinding、ClusterRoleBinding&#xff1a;角色绑定&#xff0c;用于将角色&#xff08;权限&#xff09;赋予给对象 咱们通过Role可以配置命名空间下资源…

第16章_网络编程拓展练习(TCP编程,UDP编程)

文章目录 第16章_网络编程拓展练习TCP编程1、学生与老师交互2、查询单词3、拓展&#xff1a;查询单词4、图片上传5、拓展&#xff1a;图片上传6、多个客户端上传文件7、群聊 UDP编程8、群发消息 第16章_网络编程拓展练习 TCP编程 1、学生与老师交互 案例&#xff1a;客户端模…

springboot3+springsecurity6集成druid启动报错

环境&#xff1a;springboot3security6druid1.2.20 druid1.2.20这个版本开始支持springboot3自动配置&#xff0c;不再需要手动引入 依赖为 <dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-3-starter</artifactId>…

概率论在激光雷达的目标检测和跟踪中的应用

概率论在激光雷达的目标检测和跟踪中发挥着重要的作用&#xff0c;通过建立概率模型和应用贝叶斯推断&#xff0c;可以处理激光雷达数据的不确定性&#xff0c;并提供准确的目标检测和跟踪结果。概率模型是激光雷达目标检测和跟踪的基础。激光雷达可以提供目标的位置、速度和形…

Qt程序如何在Release模式下进行断点调试

有些时候,因为某些工程pro文件设置了debug和Release版本的原因,导致在编译运行的时候,程序会自动生成带d后缀的一些库文件,进行调试。 debug模式下我们打断点进行调试,大家都知道。但是Release模式下,如果你直接Ctrl + R运行,肯定是无法断点调试的。 那么这个时候,我…

AEB滤镜再破碎,安全焦虑「解不开」?

不久前&#xff0c;理想L7重大交通事故&#xff0c;再次引发了公众对AEB的热议。 根据理想汽车公布的事故视频显示&#xff0c;碰撞发生前3秒&#xff0c;车速在178km/h时驾驶员采取了制动措施&#xff0c;但车速大幅超出AEB&#xff08;自动紧急刹车系统&#xff09;的工作范…