一、踩坑记

1、Select 组件需要显示 value 但传递给后台的是 key

https://www.jianshu.com/p/c99c520b1159

2、Select 组件或 Dropdown 组件下拉框随页面上下滑动的问题

问题：当页面数据过多需要滚动时，展开Select组件或Dropdown组件的下拉框后，滚轮页面，下拉框会跟着上下滑动

解决：如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentElement} 将下拉弹层渲染节点固定在触发器的父元素中。

<Select getPopupContainer={triggerNode => triggerNode.parentElement}
>

【拓展】Select 组件与 Dropdown 组件：

Select 组件：选择器。
Dropdown 组件：下拉菜单。

3、Select 组件滑动下拉框数据自动改变的问题

问题：本地环境没问题，测试环境的 bug —— Select 组件，上下滑动下拉框里的数据，数据自动变了

解决：这一般是 options 中的 label 和 value 不同导致的，你可以通过 optionFilterProp="label" 将过滤设置为展示值以避免这种情况。

<Select optionFilterProp="label"
>

上述解决方案，不支持搜索，若要同时支持搜索，需这样：

<Select showSearchoptionFilterProp="children"
>

【拓展】option 与 options：

option：选择器的每一项。
options：官方解释——数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 —— { label, value }[] 。

二、Select 组件使用案例

<div>当前选手：<Selectstyle={{ width: 120 }}listHeight={200}value={playerName}onSelect={changePlayer}showSearchoptionFilterProp="children"getPopupContainer={triggerNode => triggerNode.parentElement}>{playerList.map(item => {return (<Optionkey={item.id}value={item.name}>{item.name}<Option>)})}</Select>
</div>

antd Select组件官网直达

antd Select组件和 Dropdown组件踩坑·记相关推荐

vantUI组件：获取验证码 - 踩坑篇
vant 的button组件:(发送验证码)按钮点击没反应? 应用场景 · 前戏: 效果图解说: 代码公示: <van-fieldv-model="sms"centercle ...
微信小程序踩坑记——ColorUI组件的使用
微信小程序踩坑记--组件的使用组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接:官网链接,GitHub链接简介 ColorUI是一个css库!!!在你引入样式后可以 ...
Egg整合antd文件上传以及防踩坑指南
Egg整合antd文件上传以及防踩坑指南前言一. 项目编写二. 注意事项 2.1 清理缓存 2.2 antd的Upload组件得到的事件对象问题 2.3 关于onChange事件的注意前言最 ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
python从入门到实践django看不懂_Python编程：从入门到实践踩坑记 Django
<>踩坑记 Django Django Python 19.1.1.5 模板new_topic 做完书上的步骤后,对主题添加页面经行测试,但是浏览器显示服务器异常. 个人采用的开发环境是 ...
东八区转为0时区_踩坑记 | Flink 天级别窗口中存在的时区问题
❝ 本系列每篇文章都是从一些实际的 case 出发,分析一些生产环境中经常会遇到的问题,抛砖引玉,以帮助小伙伴们解决一些实际问题.本文介绍 Flink 时间以及时区问题,分析了在天级别的窗口时会遇到的 ...
android小程序_小程序踩坑记
小程序踩坑记希望这个文章能尽量记录下小程序的那些坑,避免开发者们浪费自己的生命来定位到底是自己代码导致的还是啥神秘的字节跳变原因. 前记小程序大多数坑是同一套代码在不同平台上表现不一致导致的,微信 ...
m3u8 video ios h5_移动端H5页面踩坑记
移动端H5页面踩坑记移动端的样式问题「1. 安卓 font-weight:700;以上才被认为是加粗.」「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...
安装sql server踩坑记【sql2000程序安装配置服务器失败】
安装sql server踩坑记安装程序配置服务器失败.参考服务器错误日志和 C:\WINDOWS\sqlstp.log 了解更多信息. 在C:\Program Files\Microsoft SQL ...

antd Select组件和 Dropdown组件踩坑·记

一、踩坑记

1、Select 组件需要显示 value 但传递给后台的是 key

2、Select 组件或 Dropdown 组件下拉框随页面上下滑动的问题

3、Select 组件滑动下拉框数据自动改变的问题

二、Select 组件使用案例

antd Select组件和 Dropdown组件踩坑·记相关推荐

最新文章

热门文章

antd Select组件 和 Dropdown组件 踩坑·记

一、踩坑记

1、Select 组件需要显示 value 但传递给后台的是 key

2、Select 组件或 Dropdown 组件下拉框随页面上下滑动的问题

3、Select 组件滑动下拉框数据自动改变的问题

二、Select 组件使用案例

antd Select组件 和 Dropdown组件 踩坑·记相关推荐

最新文章

热门文章

antd Select组件和 Dropdown组件踩坑·记

antd Select组件和 Dropdown组件踩坑·记相关推荐