Antd

问题描述
antd3.11.0版本新增的扩展Select下拉菜单的功能，当在额外元素上加点击事件时不生效。

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

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>

根本原因
下拉框的事件阻止了自己在上写的事件，查到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事件，然后阻止事件默认行为就好了。