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>

 如果你的select在表单中，你需要把div包在getFieldDecorator外面

 1 <FormItem label='监理单位'>
 2     <div onMouseDown={(e) => {
 3         e.preventDefault();
 4         return false;
 5     }}>
 6         {getFieldDecorator('EngineeringSupervisor',{
 7             rules:[{required:true,message:'监理单位不能为空!'}]
 8         })(
 9             
10             <Select
11             dropdownRender={menu => (
12                 <div>
13                     {menu}
14                     <Divider style={{ margin: '4px 0' }}/>
15                     <div style={{ padding: '8px', cursor: 'pointer' }} onClick={()=>{this.setState({groupAddVisible:true})}}>
16                         <Icon type='plus' />添加单位
17                     </div>
18                 </div>
19             )}
20         >
21             {this.state.engineeringSupervisor.length>0?this.state.engineeringSupervisor.map(item => {
22                 return (<Option value={item.Id}>{item.Name}</Option>)
23             }):null}
24         </Select>
25         )}
26     </div>
27 </FormItem>

 

posted @ 2019-04-16 13:53  咖啡漩涡  阅读(4468)  评论(1)  编辑  收藏  举报