React 關於Antd Select組件dropdownRender擴展菜單，點擊事件沒有響應

本文轉載自查看原文 2019-04-16 13:53 465 React

官方給出的示例是，在提供菜單的同時又補充了一個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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 父ListView嵌套子ListView時點擊事件沒有響應 React antd的select框的onchange事件只能點擊一次如果想選中的值還可以被點擊就用onselect事件 React + antd （Menu組件渲染多級菜單） react + antd Menu 點擊菜單，收起其他展開的所有菜單 react使用antd組件遞歸實現左側菜單導航樹 react+antd快捷菜單搜索組件：MenuSearch 基於Antd Select封裝的組件 react引入antd組件 react + antd實現動態菜單事件響應方法(點擊等)