Antd <Select />组件中通过dropdownRender在额外元素上加的onClick()事件为什么不生效？

Question

问题描述

Antd <Select /> 组件中通过dropdownRender自定义下拉框内容后，在额外元素上加上的onClick()事件无效果，或者说不灵敏（点击10次可能会生效一次）。

哪位使用过Antd的大神看一眼。。。在线等。急！！！

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

背景（需求场景）：

有时候在使用下拉框组件选择的时候，如果没有想要的选择，可以在最下面友好的加上一个添加按钮去新建数据，如下图所示：

尝试过的方法：

1. 看到了API中的dropdownRender接收的方法有第二个参数props(menuNode: ReactNode, props) => ReactNode，尝试使用后发现必须要在元素里以下多余的代码console.log()才生效，如下
2. 考虑过把额外的元素写在一个函数组件里并传props；阻止时间冒泡；查看API中是否有之前属性可以控制等等，都不行。
3. 猜想可能是点击时，除非点击某一Option 选项，点击其他地方都是调用的隐藏下拉框的事件，也就是说下拉框的隐藏事件阻止了自己写的事件，那就怎么办呢？？。

// 使用第二个参数props
dropdownRender={(ReactNode, props) => (
 <div>
  {ReactNode}
+ {console.log('props: ', props)}
  <Divider style={{ margin: '4px 0' }} />
  ...
 </div>)

相关代码

<Select 
    defaultValue="lucy"
    dropdownRender={(ReactNode, props) => (
      <div>
        {ReactNode}
        <Divider style={{ margin: '4px 0' }} />
        <div 
        style={{ padding: '8px', cursor: 'pointer' }}
        onClick={()=> {
          console.log('Add item onClick()...')
        }}
        >
          <Icon type="plus" /> Add item
        </div>
      </div>
    )}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
  </Select>

也可以在线尝试我写的Demo：

<Select /> props:

参数	说明	类型	默认值
dropdownRender	自定义下拉框内容	(menuNode: ReactNode, props) => ReactNode	-

Answer 1

可以算antd的一个小bug吧，可以通过阻止事件默认行为，使click事件生效

<div
    onMouseDown={(e) => { e.preventDefault(); return false; }}
  >
  <Select
    defaultValue="lucy"
    style={{ width: 120 }}
    dropdownRender={(menu, props) => (
      <div>
        {menu}
        <Divider style={{ margin: "4px 0" }} />
        <div
          style={{ padding: "8px", cursor: "pointer" }}
          onClick={() => {
            console.log("Add item onClick...不生效");
          }}
        >
          <Icon type="plus" /> Add item
        </div>
      </div>
    )}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
  </Select>
  </div>

在组件外层加一个div，添加onMouseDown事件，然后阻止事件默认行为就好了。