解决antd的select嵌套tab问题

// select自定义下拉菜单嵌套tabs，当tabs过多时，点击更多按钮popup中的选项，下拉菜单自动关闭

// 解决方法：包裹一层div 阻止事件传播

import { Button, InputNumber, Select, Tabs } from "antd";
const { TabPane } = Tabs;

export default class TabAndDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visiable: false,
      tabs: [
        {
          lable: "tab1",
          id: "tab1",
        },
        {
          lable: "tab2",
          id: "tab2",
        },
        {
          lable: "tab3",
          id: "tab3",
        },
        {
          lable: "tab4",
          id: "tab4",
        },
        {
          lable: "tab5",
          id: "tab5",
        },
      ],
    };
  }

  preventEvent = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  render() {
    const { tabs, visiable } = this.state;
    return (
      <div style={{ marginLeft: 20, marginTop: 20 }}>
        <Select
          open={visiable}
          onDropdownVisibleChange={(visiable) => {
            this.setState({ visiable });
          }}
          style={{ width: 300 }}
          dropdownRender={() => {
            return (
              <div onMouseDown={this.preventEvent}>
                <Tabs>
                  <Tabs.TabPane tab="项目 1" key="item-1">
                    内容 1
                  </Tabs.TabPane>
                  <Tabs.TabPane tab="项目 2" key="item-2">
                    内容 2
                  </Tabs.TabPane>
                  <Tabs.TabPane tab="项目 3" key="item-3">
                    内容 2
                  </Tabs.TabPane>
                  <Tabs.TabPane tab="项目 4" key="item-4">
                    内容 2
                  </Tabs.TabPane>
                  <Tabs.TabPane tab="项目 5" key="item-5">
                    内容 2
                  </Tabs.TabPane>
                </Tabs>
              </div>
            );
          }}
        ></Select>
      </div>
    );
  }
}