antd select实现搜索和回显功能（更新中～）

大家好～～我是一枚程序鱼🐟。

这期给大家分享下，关于antd-select的一些基本的功能。在select组件中，回显和搜索功能当然是家喻户晓的。后期有遇到其他的功能，我会更新到这个文档中。

下面是单独对antd-select组件的引入和书写。

<Select
            showSearch
            mode="multiple"
            allowClear
            disabled={!row.select}
            onChange={handleChange}
            filterOption={filterOption}
            options={text?.map((item: { nick: any; empId: any; }) => ({ label: item?.nick, value: item?.empId }))}
          />


// 过滤方法
const filterOption = (input: string, option: { value: any; label: any; }) => {
    const { value, label } = option;
    return (
      value?.toLowerCase().indexOf(input.toLowerCase()) >= 0
      || label?.toLowerCase().indexOf(input.toLowerCase()) >= 0
    );
  };

值得注意的是：后台返回我们的是怎么样的数据，我们提交的时候也要返回一致的数据。就拿我这个例子来说吧，很显然后端返回我们的是[{ nick:'章三', empId: '001'; }];但是在antd-design的select组件中，其value属性，接收的数据格式是这样的[{ label: '李四', value:'002'; }]。所以我们拿到后端请求的数据是需要转化的。以上代码都有体现～～～

但是，我总觉得每次这样写是有点冗余的，为此我就封装了下，下面是代码详情：

js核心代码：

import React from 'react';

import PropTypes from 'prop-types';

import { Select } from 'antd';



import './index.scss';



function SelectBox({

title,

list,

onChange,

...props

}) {

return (

<div className="search-box">

<span className="search-label">{title}</span>

<Select

className="select-box"

showSearch

filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}

onChange={val => onChange(val)}

{...props}

>

{list.map(item => (

<Select.Option value={item.value} key={item.value}>

{item.label}

</Select.Option>

))}

</Select>

</div>

);

}



SelectBox.propTypes = {

title: PropTypes.string,

list: PropTypes.arrayOf(PropTypes.shape({

label: PropTypes.string,

value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

})),

onChange: PropTypes.func,

};



SelectBox.defaultProps = {

title: '',

list: [],

onChange: () => {},

};



export default SelectBox

下面是css代码：

.search-box {

margin-bottom: 20px;

display: inline-block;

.search-label {

margin-right: 10px;

}

.select-box {

width: 200px;

}

}