阅读排行

React 关于Antd Select组件dropdownRender扩展菜单，点击事件没有响应

官方给出的示例是，在提供菜单的同时又补充了一个Add item。

技术分享图片

页面效果无误，但是在添加点击事件时发现并不能触发点击事件

 1 <Select
 2     dropdownRender={menu => (
 3         <div>
 4             {menu}
 5             <Divider style={{ margin: ‘4px 0‘ }}/>
 6             <div style={{ padding: ‘8px‘, cursor: ‘pointer‘ }} onClick={()=>{console.log(206)}}>
 7                 <Icon type=‘plus‘ />添加单位
 8             </div>
 9         </div>
10     )}
11 >
12     {this.state.engineeringOwner.length>0?this.state.engineeringOwner.map(item => {
13         return (<Option value={item.Id}>{item.Name}</Option>)
14     }):null}
15 </Select>

最终在Issues中找到了答案，即：在select组件外部包一层div，将鼠标默认事件注释掉

 1 <div onMouseDown={(e) => {
 2     e.preventDefault();
 3     return false;
 4 }}>
 5 <Select
 6     dropdownRender={menu => (
 7         <div>
 8             {menu}
 9             <Divider style={{ margin: ‘4px 0‘ }}/>
10             <div style={{ padding: ‘8px‘, cursor: ‘pointer‘ }} onClick={()=>{console.log(206)}}>
11                 <Icon type=‘plus‘ />添加单位
12             </div>
13         </div>
14     )}
15 >
16     {this.state.engineeringOwner.length>0?this.state.engineeringOwner.map(item => {
17         return (<Option value={item.Id}>{item.Name}</Option>)
18     }):null}
19 </Select>
20 </div>

文章来自：https://www.cnblogs.com/CoffeeEddy/p/10716592.html