Select选择器(antd-design组件库)简单使用以及增加搜索功能

news/2024/7/15 19:16:32 标签: intellij-idea, react.js, 前端, javascript

1.Select选择器

下拉选择器。

2.何时使用

·弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。

·当选项少时(少于 5 项),建议直接将选项平铺,使用 Radio 是更好的选择。

组件代码来自: 选择器 Select - Ant Design

3.本地验证前的准备

参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_西晋的no1的博客-CSDN博客】,将 选择器 Select - Ant Design 中需要在本地使用的代码复制覆盖App2.js中的全部代码,启动代码,可在本地查看现象和更改代码。

4.本地验证Select的基本使用

复制下图所示代码,了解Select的一些基本使用格式

5.在上一步的第一个Select中增加搜索功能,在第一个Select中增加下述3行代码,即可实现搜索子项的功能

javascript">showSearch
optionFilterProp="children"
filterOption={(input, option) => (option?.label ?? '').includes(input)}

效果图如下:

本文仅介绍了组件Select的部分内容,更多内容请参阅官方文档: 选择器 Select - Ant Design


http://www.niftyadmin.cn/n/400755.html

相关文章

操作系统之IO管理

目录 IO设备的概念和分类 IO控制器 IO控制方式 IO软件层次结构 IO应用程序接口和驱动程序接口 IO核心子系统 假脱机技术 IO设备的分配和回收 缓冲区管理 磁盘的结构 磁盘调度算法 磁盘的管理 固态硬盘 本文内容摘自:5.1_1_I-O设备的概念和分类_哔哩哔哩…

chatgpt赋能python:Python如何保存为py文件

Python如何保存为py文件 如果你是一个Python初学者或者在使用Python进行编程,你可能会想知道如何将Python代码保存为.py文件。本文将向您介绍Python如何保存为py文件,这样你就可以像其他编程语言一样,通过编辑器来直接修改和运行代码了。 保…

Vue.js 比较重要知识点总结四

概述 ref toRef toRefs进阶,深入理解vue3 setupVue3为何比Vue2快?怎样理解 Vue 的单向数据流?Vue 中事件绑定原理vue3 mitt 使用 ref toRef toRefs进阶,深入理解 为何需要ref? 返回值类型,会丢失响应式se…

VESC操作入门(三)——PPM输入控制和ADC输入控制

目录 一、PPM输入控制1.1、硬件准备1.2、PPM信号1.3、校准电机1.4、输入设置 二、ADC输入控制2.1、硬件准备2.2、更改固件2.3、电压信号2.4、校准电机2.5、输入设置 三、电动车转把控制3.1、转把说明3.2、转把测试 四、ADC的其它模式4.1、Current No Reverse Brake ADC24.2、Cu…

代码随想录刷题第38天|LeetCode509斐波那切数列、LeetCode70爬楼梯、LeetCode746使用最小花费爬楼梯

1、LeetCode509斐波那切数列 题目链接&#xff1a;509、斐波那契数列 递归法&#xff1a; class Solution { public:int fib(int n) {if (n < 1) return n;return ( fib(n-1) fib(n-2) );} }; 动态规划五部曲&#xff1a; 确定dp数组以及下标的含义&#xff1a;dp[i]的…

CG平台实验——线性回归

文章目录 练习1&#xff1a;线性回归介绍1 实现简单示例函数1.1 提交解决方案 2 单变量线性回归2.1 绘制数据2.2 梯度下降2.2.1 更新公式2.2.2 实现2.2.3 计算成本J(θ)2.2.4 梯度下降 2.3 可视化成本函数 选做练习3 多变量线性回归3.1 特征标准化3.2 梯度下降 练习1&#xff1…

【华为OD机试】 阿里巴巴找黄金宝箱(Ⅱ)【2023 B卷|100分】

【华为OD机试】-真题 !!点这里&#xff01;&#xff01; 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 一贫如洗的樵夫阿里巴巴在去砍柴的路上&#xff0c;无意中发现了强盗集团的藏宝地&#xff0c; 藏宝地有编号从0-N的箱子&#xff0c;每个箱子上面贴有箱子中藏有金…

大数据从入门到精通30天第一天

1 如何成为大数据领域的专家 大数据是当今最热门的技术领域之一。它是指处理和分析大量数据的技术和方法。随着互联网的普及和各种计算设备的广泛应用&#xff0c;我们生产的数据量越来越大&#xff0c;大数据技术也越来越受到关注。 如果你对大数据感兴趣&#xff0c;想要学…