问题描述
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事件，然后阻止事件默认行为就好了。
