React中基于Antd中的Select进行接口获取下拉框的模糊搜索

这边在项目中根据客户需求需要把一个Select远程获取的options进行模糊搜索

这里有两种方法：

1、让后端修改接口，进行模糊查询

2、通过前端修改👇

一开始我是用的ProFormSelect组件，但是搜了半天官方文档找不到模糊搜索远程数据的相关属性并且实现的

所以到最后我改成了Select组件，根据Select组件中的onDropdownVisibleChange、showSerach、onchange、value来进行模糊查询和双向绑定

如果需要回显的，可以在onChange的函数中，刚进入页面如果有值就给他设置上去，接下来上代码

在onDropdownVisibleChange中进行获取options函数

这边有个坑，在onDropdownVisibleChange获取函数时需要给他进行一个判断来进行获取接口，否则会报错，这边猜想是因为同步异步问题导致的

      //获取供应商名称接口
  const [options, setOptions] = useState([])
  const [optionLoaded, setOptionLoaded] = useState(false)
    //下拉框双向绑定
  const [selectValue,setSelectValue]=useState('')
  const onChange = (value) => {
    console.log(`selected ${value}`);
    setSelectValue(value)
  }
  const getOptions = () => {
    if (!optionLoaded) {
   //获取接口数据
    getApplyName()
        .then((res) => {
          if (res.ret === 0) {
            setOptions(res.msg.data || [])
          }
          setOptionLoaded(true)
        })
      }
    
  }

    <Select
         style={{ width: 400 }}
         onDropdownVisibleChange={getOptions}
         value={selectValue}
         onChange={onChange}
         showSearch
         name={purchasingId.applyName}
         label={'名称'}
         placeholder=""
         >
         {options.map((e) => {
                      return (
                        <Select.Option key={e.value} value={e.value}>
                          {e.value}
                        </Select.Option>
                      )
           })}
                        </Select>