封装一个漂亮的ant design form下拉框组件

在ant design 的form组件中能用于提交的组件比较少，所以我在这写了一个可以用下拉列表选择提交的组件，调用非常简单。
代码：
 1 import React from 'react';
 2 import { Dropdown,Button,Icon,Menu,Input } from 'antd'
 3 export interface Props {
 4     item?:Array<string>,//下拉列表值
 5     default?:string,//默认值
 6     append?:string | Array<string>//item之前追加值
 7     style?:any,//下拉列表父组件style样式
 8     overlayStyle?:any,//下拉列表样式
 9     form?:any,//表单
10     validationName?:string,//提交名称,用于菜单提交获取
11     icon?:string,//列表图标名称
12 }
13 export interface State {
14     menuOpt:string,//选中值
15 }
16 class myMenu  extends React.Component<Props, State> {
17     constructor(props: Props) {
18         super(props);
19         //初始化默认选择
20         if(this.props.item !== undefined){
21             if(this.props.default !== undefined){
22                 this.state=({menuOpt:this.props.default})
23             }else{
24                 this.state=({menuOpt:this.props.item[0]})
25             }
26         }else{
27             this.state=({menuOpt:""});
28         }
29     }
30     setMenu=(val:string | undefined )=>{
31         const menuOpt:string = typeof val !== "undefined" ? val : "";
32         this.setState({menuOpt});
33         if(this.props.form != undefined){
34             let json:object = {};
35             json[this.props.validationName !== undefined ? this.props.validationName : 'menu'] = menuOpt;
36             this.props.form.setFieldsValue(json);
37         }
38     }
39     render() {
40         let menu = <Menu></Menu>;
41         if(this.props.item !== undefined){
42             //生成菜单
43             menu=<Menu>
44                 {
45                     this.props.append !==undefined?
46                         typeof this.props.append === 'string' ?
47                             <Menu.Item key={typeof this.props.append === 'string'?this.props.append:''}>
48                                 <a href="#" onClick={()=>{this.setMenu(typeof this.props.append === 'string'?this.props.append:'')}}>
49                                     {!!this.props.icon?<Icon type={this.props.icon} />:undefined}
50                                     {this.props.append}
51                                 </a>
52                             </Menu.Item>
53                         :this.props.append.map((value)=>{
54                             return(<Menu.Item key={value}>
55                                 <a href="#" onClick={()=>{this.setMenu(value)}}>
56                                     {!!this.props.icon?<Icon type={this.props.icon} />:undefined}
57                                     {value}
58                                 </a>
59                             </Menu.Item>)  
60                         })
61                     :undefined
62                 }
63                 {this.props.item.map((value)=>{
64                     return(<Menu.Item key={value}>
65                         <a href="#" onClick={()=>{this.setMenu(value)}}>
66                             {!!this.props.icon?<Icon type={this.props.icon} />:undefined}
67                             {value}
68                         </a>
69                     </Menu.Item>)  
70                 })
71             }</Menu>;
72         }
73         return (
74             <span style={this.props.style}>
75                 <Dropdown overlay={menu} placement="bottomCenter" overlayStyle={this.props.overlayStyle}>
76                     <Button>{this.state.menuOpt}<Icon type="down" /></Button>
77                 </Dropdown>
78                 {
79                     this.props.form!== undefined && this.props.form.getFieldDecorator !== undefined?
80                     this.props.form.getFieldDecorator(this.props.validationName!== undefined ? this.props.validationName:'menu', {
81                         initialValue: this.state.menuOpt,
82                       })(<Input type="hidden"/>)
83                     :undefined
84                 }
85             </span>
86          );
87     }
88 }
89 export default myMenu;
调用示例：
效果：
也可以在普通页面中调用：
获取选择的下拉菜单值：
效果：