【React-admin】构建React应用（14）- 基于ant.design扩展select过滤

在使用antd的select组件的时候，由于对lable扩展或者lable的复杂化，那么在展示的时候可能有很多lable是一样的，在选择的时候无法区分。所以需要根据属性对options进行过滤。

比如封装后的组件是下图这样的，那么这每一个option将会是很复杂的。用户在使用的时候可能只记住某一个属性，并且需要根据这个属性进行筛选。比如服务对象，包含服务和端口号，我需要根据协议进行过滤。

那么就需要对select组件进行扩展，首先分析一下，如果你需要根据属性进行过滤，那么这个option上需要封装相关的属性。我们知道select中的定义基本是：

{
	lable:''
	value:''
}

除此之外，因为它本身也是个对象，可以额外添加我们需要的字段属性，比如下图所示，我需要支持hostname，uuid，ip地址过滤，所以在option中附件了额外的信息：

我们知道在配置页面的下拉数据，一般都是从后台拉取过来的，所以请求回来数据后，重新封装一下就可以了。数据封装完了，可以在官网看到这么个例子检索用户数据

里面给出了动态的向服务端请求数据，但是为了减少服务器的压力，我会在页面加载列表的时候把需要的数据准备好，因为可能在添加/修改页面都会用到。

数据准备好就可以参考官网给出的列子进行coding了。

别着急动手，在codig之前我们还需要解决一个问题：怎么支持用户根据不同的属性进行过滤呢？

最初的设计是：在提供选择框的同时，给定用户一个选择属性的功能，然后获取到属性和搜索值，记进行匹配。但是想想似乎不太合理，一来页面布局会显得臃肿，二来你需要考虑属性配置的问题，搞起来有点麻烦。

记得当初使用wireshark的时候，曾经使用过根据ip过滤的操作，便想到，其实我们也可以参考这种方式即在select中输入数据各格式为：属性=值，即ip=xx.x.x.x的格式。然后对格式进行处理就可以获取到属性和值。

如果你使用过qs和lodash，那么看到这里，你回很开心。

• qs：可以帮你处理路径参数问题，形如：ip=xx.x.x.x通过qs.parse(ip=xx.x.x.x)，可以自转换为{ip:xx.x.x.x}的格式
• lodash：lodash的filter方法可以根据一个对象去匹配，也就是可以通过{ip:xx.x.x.x}去一个包含ip属性的对象数据中匹配到一致的数据。
  
• 除此之外你似乎还要考虑防抖的问题，但是在antd中他已经给你做好了，你就不需要处理了。但是一个敏感的前端程序员，应该会想到这个频繁触发导致频繁渲染或者请求的东西，都需要做防抖和节流处理。至于是防抖还是节流，需要你根据业务来判断了。

那么知道这些，我们就可以动手封装这个组件了：

import React, { useState, useMemo } from 'react'
import { Select, Spin } from 'antd';
import { debounce, filter } from 'lodash';
import qs from 'qs'

/**
 * 该组件支持属根据属性查询，格式为：属性=值，如ip=xx.x.x.x
 * @param {*} props 
 * @returns 
 */
export default function DebounceSelect(props) {
  const { fetchOptions } = props
  const [fetching, setFetching] = useState(false);
  const [options, setOptions] = useState(fetchOptions);
  const debounceFetcher = useMemo(() => {
    const loadOptions = (query) => {
      if (!query) {
        setOptions(fetchOptions);
      } else {
        console.log("查询字符串:", query)
        // 将查询数据进行解析
        const obj = qs.parse(query)
        console.log("解析结果:", obj)
        // 根据解析后的数据记进行匹配
        const newOptions = filter(fetchOptions, obj)
        console.log("匹配到的数据:", newOptions)
        setOptions(newOptions);
        setFetching(false);
      }
    };
    return debounce(loadOptions, 1000);
  }, [fetchOptions]);

  /**
   * 根据属性去过滤
   * @param {*} options 需要过滤的数据
   * @param {*} attrs 根据哪些属性去过滤
   */
  return (
    <Select
      mode="multiple"
      optionLabelProp="name"
      showSearch
      filterOption={false}
      onSearch={debounceFetcher}
      notFoundContent={fetching ? <Spin size="small" /> : null}
      {...props}
      options={options}
    />
  );
}

将该组件导入大到其他组件中使用

<DebounceSelect
	value={workload}
	onChange={newValue => {
	changeW(newValue);
	}}
	fetchOptions={workloadsT} 
/>

当输入这种格式的搜索数据时，就会输出正确的结果。

如果你是自己写的，那么可能会出现匹配到数据时，options跟新了，但是没有正确渲染到select中，那么你可以少了一个属性：filterOption={false}。否则他会根据输入项筛选，因为它默认值是true，会根据ip=xx.x.x.x的格式去过滤，它默认的是从label中过滤。