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

目录

一、踩坑记

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

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

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

二、Select 组件使用案例

---

一、踩坑记

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 
  showSearch
  optionFilterProp="children"
>

【拓展】option 与 options：

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

二、Select 组件使用案例

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

antd Select组件官网直达