react对antd中Select组件二次封装

见贤思齐焉，见不贤内自省

建立.js组件，在父组件中引入，传入自定义属性

import React from 'react';
import { Select } from 'antd';
import 'antd/dist/antd.css';
import '../styles/select.less';

const {Option} = Select;

class MSelect extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {}
    }
    //父级传入字段默认值
    static defaultProps = {
        title:"",
        options:[],
    }
    render() {
    //keyField  唯一key
    //valueField 指定当前选中的条目
    //titleField 当前项对应的label
    //options  options数组
        let { title,keyField,valueField,titleField,options, ...rest } = this.props;
        return (
            <div className="select">
                {title&&<p className="select-title">{title}</p>}
                {options.length>0&&<Select {...rest}>
                    {options.map((item)=>{
                        return <Option key={keyField?item[keyField]:(item?.title||item)} value={valueField?item[valueField]:(item?.title||item)}>{titleField?item[titleField]:(item?.title||item)}</Option>
                    })}
                </Select>}
            </div>
        )
    }
}

export default MSelect;

less:

// 普通字体
@font-face {
    font-family: myFontFamily;
    src: url('../static/msyh.ttc');
}

//加粗字体
@font-face {
    font-family: myFontFamily-Medium;
    src: url('../static/msyhbd.ttc');
}

//细长字体
@font-face {
    font-family: myFontFamily-Highlight;
    src: url('../static/msyhl.ttc');
}

.search .select .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    width: 200px;
}

.select{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input{
        height: 28px;
        line-height: 28px;
    }
    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
        width: 200px;
        height: 28px;
    }
    //options配置中的多选 可输入 select option 的css
    .ant-select-show-search .ant-select-selector{
        width: 200px;
        min-height: 28px;
        // height: 28px;
        border-radius: 6px;
    }
    .ant-select-show-search .ant-select-selector .ant-select-selection-item{
        height: 20px;
        line-height: 20px;
        border-radius: 6px;
    }
    &-title{
        padding: 0;
        margin: 0;
        min-width: 105px;
        text-align: right;
    }
    &-title-input{
        padding: 0;
        margin: 0;
        min-width: 90px;
        text-align: right;
    }
}

使用：

在组件中引入，让后使用

 <MSelect
      title={`${item.title}：`}
      showArrow={true}
      value={this.state[`${item.keyName}`]}
      onChange={(e) => { this.inputName(`${item.keyName}`, e) }}
      options={item.keyAndValueList}
      keyField="key"
      valueField="key"
      titleField="value"
      dropdownMatchSelectWidth={true} //官方自带属性 
></MSelect>

数据格式：

keyAndValueList ：[
	{ value: "xx管理", key: 0 }, 
	{ value: "xxx管理", key: 1 }, 
	{ value: "xxx管理", key: 2 }
]

属性都是通过 …rest 解构赋值的形式来给到MSelect组件的

<Select {...rest}></Select>