antd select（在使用antd遇到的不常见问题（一））
本文目录
- 在使用antd遇到的不常见问题（一）
- 使用antd自制时间范围选择器
- antd的select 的key 和value获取
- antd默认清除select选中的内容（最简便方式）
- antd Form表单中的select组件在多选的模式下增加全选
- react中antd每当打开不一样的弹窗时，不能更新弹窗的内容
- antd限制select多选时选中的最多个数怎么做
在使用antd遇到的不常见问题（一）
antd的select、DatePicker、TreeSelect、AutoComplete组件需要注意页面滚动会导致下拉框也随之移动，如下图：
日期组件可以通过getCalendarContainer属性来控制下拉框显示位置。具体使用getCalendarContainer={trigger =》 trigger.parentNode}
其它组件通过getPopupContainer来阻止下拉框随页面滚动，写法同上
使用antd自制时间范围选择器
antd的TimePicker时间选择框不能定义超过 23时、59分及59秒
对于普通的时间选择足以应付，但如果对于赛事相关的时间选择就很不方便，赛事通常以90分钟这种量级计算，那么TimePicker就不能满足我们的需求了
所以我使用select组件重新制作了一下，效果如下
虽然很不完善，不过大体算满足了需求，实现起来也很简单，把四个select组件拼接一下就ok了
render中的循环创建option
样式就根据个人喜好自己制作吧
antd的select 的key 和value获取
*默认情况下 onChange 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性。
选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象
antd默认清除select选中的内容（最简便方式）
前段时间我呕心沥血解决了antd默认清除select选中的内容问题，之后和朋友说起这个事情，她说：
如此简单真的是惊呆我了。
最后感谢我的好朋友白雪雪的宝贵意见。
antd Form表单中的select组件在多选的模式下增加全选
后台项目中的新增需求，要在已经是多选模式的select组件中加入全选选项。
把Form表单中的select组件改为受控组件，单独提出来封装一下。
父组件中：
父组件给子组件传回调函数，接收子组件的值，然后存储到state中，Form表单提交时，从state中获取Selet组件的值。
子组件中：
react中antd每当打开不一样的弹窗时，不能更新弹窗的内容
select里面的内容是上一个弹窗里面内容。
大概最主要的原因是，onChange事件里面需要写this.setState，
setState本质是通过一个队列机制实现state更新的。执行setState时，会将需要更新的state合并后放入状态队列，而不会立即更新state，队列机制可以批量更新state。如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时对状态队列进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去。
antd限制select多选时选中的最多个数怎么做
方法：获取多选下拉框对象数组→循环判断option选项的selected属性（true为选中，false为未选中）→使用value属性取出选中项的值。实例演示如下： 1、HTML结构 option-A option-Boption-C option-D2、javascript代码 function fun(){var select
