antd Select组件和 Dropdown组件踩坑·记_a-dropdown组件使用

一、踩坑记

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 组件使用案例 
    当前选手：
    <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>
antd Select组件官网直达 
                    1、Select组件，展开下拉框后，滑动滚轮，下拉框会跟着上下滑动解决：&lt;Select  getPopupContainer={trigger =&gt; trigger.parentNode}&gt;2、Select组件，上下滑动下拉框里的数据，数据自动变了解决：...
https://ant.design/components/dropdown-cn/
import React, {Component} from 'react';
import {Menu,Dropdown} from "antd";
import 'antd/dist/antd.css';
import './index.css';
import {DownOutlined} from '@ant-design/icons'
const menu = (
 @import " ~@jswork/react-ant-dropdown-menu/dist/style.css " ;
// or use sass
@import " ~@jswork/react-ant-dropdown-menu/dist/style.scss " ;
// customize your styles:
$react-ant-dropdown-menu-options : ()
 import ReactDemokit from '@jswork/react-demokit'
  trigger?: ('click' | 'hover')[]; // 触发方式
  overlay: React.ReactNode; // 下拉菜单所承载的内容元素，要求为Antd的Menu组件
  style?: React.CSSProperties; // 行内样式
  onVisibleChange?: (visible?: boolean) => void; // 监听下拉菜单出现/消失
				antd Dropdown组件动态加载数据，主要为在子菜单下循环添加，第一个sapn元素为固定的表头。先来看看模板写法，
 <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar size="small" icon="user" />
          <span>{{ org.orgName }}</span
    class="user-management-filter-btn-first"
    labelInValue
    :getTooltipContainer="trigger => trigger.parentNode"
    :defaultValue="{ key: uploadKey }"
    style="width: 130px...
				<a-dropdown 
             :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}">
              <a-menu slot="overlay">
                <a-menu-item key="1">1111</a-menu-item>
				Ant Design的Select组件中，`defaultOpen`属性用于设置Select组件初始化时是否展开下拉菜单。
默认情况下，Select组件初始化时是闭合状态，点击下拉图标或输入框会展开下拉菜单。如果你希望Select组件初始化时就展开下拉菜单，可以设置`defaultOpen`属性为`true`。
以下是一个示例代码：
```jsx
import { Select } from 'antd';
const { Option } = Select;
function MyComponent() {
  return (
    <Select defaultOpen={true}>
      <Option value="option1">Option 1</Option>
      <Option value="option2">Option 2</Option>
      <Option value="option3">Option 3</Option>
    </Select>
在上面的示例中，Select组件初始化时会展开下拉菜单，用户可以直接看到所有选项。
请注意，`defaultOpen`属性只会在组件初始化时生效，后续用户的操作（如点击下拉图标）不会受到该属性的影响。如果你希望控制Select组件展开和闭合的状态，可以使用受控属性`open`来实现。