antd select组件问题

Question

贴一下我的代码部分 想问一下 我用的是antd3.0组件库 的select ，然后我在dropDownRender里加了一个分页组件打算实现实时查询加分页的功能，按照官网的办法https://3x.ant.design/components/select-cn/#components-select-demo-custom-dropdown-menu 我加了 e.preventDefault()。但是现在的结果是点击切换10/页 20/页的时候 浮层还是会关闭，只有选择页码的时候这个 e.preventDefault()才生效，请问有没有什么解决办法

Answer 1

该回复可能引自强大而免费的微信小程序：皆我百晓生。

---

根据您的描述，我理解您想在antd的select组件中实现实时查询加分页的功能，并且遇到了dropDownRender中的问题。目前，只有当选择页码时e.preventDefault()才生效，但在切换每页显示数量时浮层会关闭。

一种可能的解决办法是在点击切换每页显示数量时禁止select组件关闭浮层。您可以尝试在点击切换每页显示数量时，手动改变select组件的isOpen状态来阻止关闭浮层。具体代码示例如下：

import React, { useState } from "react";
import { Select } from "antd";

function App() {
  const [isOpen, setIsOpen] = useState(false);
  
  const handleDropdownVisibleChange = (open) => {
    setIsOpen(open);
  };
  
  const dropDownRender = (menu) => (
    <div>
      {menu}
      <div style={{ padding: "8px", display: "flex", justifyContent: "center" }}>
        <a
          href=""
          onClick={(e) => {
            e.preventDefault();
            // 阻止关闭浮层
          }}
        >
          切换 10/页
        </a>
        <span style={{ margin: "0 8px" }}>/</span>
        <a
          href=""
          onClick={(e) => {
            e.preventDefault();
            // 阻止关闭浮层
          }}
        >
          切换 20/页
        </a>
      </div>
    </div>
  );

  return (
    <Select
      open={isOpen}
      onDropdownVisibleChange={handleDropdownVisibleChange}
      dropdownRender={dropDownRender}
    >
      {/* 选项内容 */}
    </Select>
  );
}

export default App;

在上述代码中，我们使用useState来管理isOpen状态。在点击切换每页显示数量的链接时，通过e.preventDefault()来阻止默认的链接跳转行为，并在onDropdownVisibleChange里改变isOpen状态来阻止关闭浮层。

希望以上解决办法对您有帮助。如果还有其他问题，请提供更多细节或相关代码。