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

在ant design 的form组件中 能用于提交的组件比较少，所以我在这写了一个可以用下拉列表选择提交的组件，调用非常简单。

代码：

import React from 'react';
import { Dropdown,Button,Icon,Menu,Input } from 'antd'
export interface Props {
    item?:Array<string>,//下拉列表值
    default?:string,//默认值
    append?:string | Array<string>//item之前追加值
    style?:any,//下拉列表父组件style样式
    overlayStyle?:any,//下拉列表样式
    form?:any,//表单
    validationName?:string,//提交名称,用于菜单提交获取
    icon?:string,//列表图标名称
}
export interface State {
    menuOpt:string,//选中值
}
class myMenu  extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        //初始化默认选择
        if(this.props.item !== undefined){
            if(this.props.default !== undefined){
                this.state=({menuOpt:this.props.default})
            }else{
                this.state=({menuOpt:this.props.item[0]})
            }
        }else{
            this.state=({menuOpt:""});
        }
    }
    setMenu=(val:string | undefined )=>{
        const menuOpt:string = typeof val !== "undefined" ? val : "";
        this.setState({menuOpt});
        if(this.props.form != undefined){
            let json:object = {};
            json[this.props.validationName !== undefined ? this.props.validationName : 'menu'] = menuOpt;
            this.props.form.setFieldsValue(json);
        }
    }
    render() {
        let menu = <Menu></Menu>;
        if(this.props.item !== undefined){
            //生成菜单
            menu=<Menu>
                {
                    this.props.append !==undefined?
                        typeof this.props.append === 'string' ?
                            <Menu.Item key={typeof this.props.append === 'string'?this.props.append:''}>
                                <a href="#" onClick={()=>{this.setMenu(typeof this.props.append === 'string'?this.props.append:'')}}>
                                    {!!this.props.icon?<Icon type={this.props.icon} />:undefined}
                                    {this.props.append}
                                </a>
                            </Menu.Item>
                        :this.props.append.map((value)=>{
                            return(<Menu.Item key={value}>
                                <a href="#" onClick={()=>{this.setMenu(value)}}>
                                    {!!this.props.icon?<Icon type={this.props.icon} />:undefined}
                                    {value}
                                </a>
                            </Menu.Item>)  
                        })
                    :undefined
                }
                {this.props.item.map((value)=>{
                    return(<Menu.Item key={value}>
                        <a href="#" onClick={()=>{this.setMenu(value)}}>
                            {!!this.props.icon?<Icon type={this.props.icon} />:undefined}
                            {value}
                        </a>
                    </Menu.Item>)  
                })
            }</Menu>;
        }
        return (
            <span style={this.props.style}>
                <Dropdown overlay={menu} placement="bottomCenter" overlayStyle={this.props.overlayStyle}>
                    <Button>{this.state.menuOpt}<Icon type="down" /></Button>
                </Dropdown>
                {
                    this.props.form!== undefined && this.props.form.getFieldDecorator !== undefined?
                    this.props.form.getFieldDecorator(this.props.validationName!== undefined ? this.props.validationName:'menu', {
                        initialValue: this.state.menuOpt,
                      })(<Input type="hidden"/>)
                    :undefined
                }
            </span>
         );
    }
}
export default myMenu;

调用示例：

 

 效果：

 

也可以在普通页面中调用：

  获取选择的下拉菜单值：

 效果：