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

问题描述
antd3.11.0版本新增的扩展Select下拉菜单的功能,当在额外元素上加\color{red}{onClick()}点击事件时不生效。

问题出现背景:
有时候在使用下拉框组件的时候,除了下拉选项想在加一些额外的内容,如加一个\color{red}{添加}按钮去扩展数据,如图:

代码:

function handleClick() {
  // 这个点击事件不生效
}

  <Select
    defaultValue="lucy"
    style={{ width: 120 }}
    dropdownRender={menu => (
      <div>
        {menu}
        <Divider style={{ margin: '4px 0' }} />
        <div style={{ padding: '8px', cursor: 'pointer' }} onClick={handleClick}> // 扩展元素上加点击事件
          <Icon type="plus" /> Add item
        </div>
      </div>
    )}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
  </Select>

根本原因
下拉框的事件阻止了自己在\color{red}{扩展元素}上写的事件,查到github的issues确实有这个问题,这应该算是atnd的一个小bug

解决办法

<div
    onMouseDown={(e) => { e.preventDefault(); return false; }}
  >
  <Select
    defaultValue="lucy"
    style={{ width: 120 }}
    dropdownRender={menu => (
      <div>
        {menu}
        <Divider style={{ margin: '4px 0' }} />
        <div style={{ padding: '8px', cursor: 'pointer' }} onClick={handleClick}> // 扩展元素上加点击事件
          <Icon type="plus" /> Add item
        </div>
      </div>
    )}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
  </Select>
</div>

在<Select />外包一个div,添加onMouseDown事件,然后阻止事件默认行为就好了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容