封裝一個漂亮的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;

 

調用示例：

 

 效果：

 

 

 

也可以在普通頁面中調用：

 

  獲取選擇的下拉菜單值：

 

 效果：