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:

.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>