前端 - antd3.x Select组件dropdownRender阻止事件默认行为未生效？

Question

问题描述

如题 我在下拉框里加了一个分页组件并且按照官网给出的阻止下拉框自动关闭加了e.preventDefault(),但是这个只生效在点击页码上对于选择10条/页，20/页这个弹出层还是无法控制，当选择10/页就会自动关闭下拉框。不知道问题出在哪里求大佬执教

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

<Select        style={{ width: 240 }}        placeholder="custom dropdown render"        dropdownRender={(menu) => (          <div>            {menu}            <Divider style={{ margin: "4px 0" }} />            <div              style={{ padding: "4px 8px", cursor: "pointer" }}              onMouseDown={(e) => e.preventDefault()}            >              <Pagination showSizeChanger />            </div>          </div>        )}      >        {items.map((item) => (          <Option key={item}>{item}</Option>        ))}      </Select>

你期待的结果是什么？实际看到的错误信息又是什么？

期待看到的结果是分页器上面的所有操作都可以避免select下拉框自动关闭，实际错误信息是点击切换页码条数的时候下拉框还是会关闭

Answer 1

看起来你正在使用 Ant Design 的 Select 组件，并且你遇到了一个问题，即在 dropdownRender 函数中添加的鼠标点击事件并没有阻止下拉框的自动关闭。

问题出在你的 onMouseDown 事件上。虽然你调用了 e.preventDefault()，但是在 Ant Design 的 Select 组件中，当你点击下拉框之外的区域时，这个事件并不被阻止。这是因为 Ant Design 的 Select 组件内部处理了点击事件，以实现下拉框的关闭功能。

要解决这个问题，你需要找到一个方法来阻止 Select 组件内部的点击事件处理。一种可能的解决方案是使用 CSS 来更改 Select 组件的样式，使其在分页器被渲染出来时不响应点击事件。你可以试试下面的代码：

<Select  style={{ width: 240 }}  placeholder="custom dropdown render"  dropdownRender={(menu) => (    <div>      {menu}      <Divider style={{ margin: "4px 0" }} />      <div        style={{          padding: "4px 8px",          cursor: "pointer",          pointerEvents: "none",  // 这一行将阻止所有鼠标事件        }}      >        <Pagination showSizeChanger />      </div>    </div>  )}>  {items.map((item) => (    <Option key={item}>{item}</Option>  ))}</Select>

注意这里我们使用了 pointer-events: none; CSS 属性，这将阻止在这个元素上所有的鼠标事件，包括点击事件。这样，当用户点击分页器时，Select 组件将不会接收到这个事件，因此下拉框不会关闭。

请注意，使用 pointer-events: none; 会导致这个元素不再接收任何鼠标事件，这可能会影响到分页器的其他功能（例如，用户无法通过点击箭头来改变每页的项目数量）。因此，你需要确保这是你希望的行为。如果你需要在用户点击分页器时执行一些其他操作，那么你可能需要寻找一个不同的解决方案。