1

问题描述

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 -
2019-01-30 提问
1 个回答
0

可以算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事件,然后阻止事件默认行为就好了。

撰写答案

你可能感兴趣的

推广链接