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

问题描述

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

Edit mq6q360kqy

<Select /> props:

参数 说明 类型 默认值
dropdownRender 自定义下拉框内容 (menuNode: ReactNode, props) => ReactNode -
阅读 3.6k
评论
    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事件,然后阻止事件默认行为就好了。

      撰写回答

      登录后参与交流、获取后续更新提醒