antd设置select支持输入和选择功能

这是我封装的一个select代码，直接拿过去就可以用了

import React from 'react'
import { Select } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { Option } = Select;

export interface SelectProps {
  value: string;
  setSearchOpt: any[];
  onChangeHandl: (value: any) => void;
  onSearch: (value: any) => void;
}

const SelectSearch: React.FC<SelectProps> = (props) => {
  return <>
    <Select
        showSearch // 使用单选模式可搜索
        value={props.value} // 选中当前条目，多选返回数组
        placeholder={''} // select默认展示的说明
        defaultActiveFirstOption={false} // 是否默认高亮第一个选项
        filterOption={false} // 是否根据输入项进行筛选
        onSearch={props.onSearch} // “文本框值”变化时的回调
        onChange={props.onChangeHandl} // 选中option，或input的value回调
        notFoundContent={null} // 当下拉列表为空时，显示的内容
        allowClear // 是否支持清除
        showArrow={true} // 是否显示select的右侧小图标
        suffixIcon={<UserOutlined/>} // 自定义的选择框后缀的图标
      >
        {
          props.setSearchOpt.map((item: any) => {
            return <Option value={item.value}>{item.name}</Option>
          })
        }
        {/* <Option value="1">Not Identified</Option> */}
      </Select>
  </>
}

export default SelectSearch

使用：
注：实际上我项目中我针对表单的Form.item是做了封装的，所以以下示例针对看我博客的朋友能更快速的理解，所以做了简化的示例，如有不到之处，可以指出，我会进行说明修改的。

引入：
	import SelectSearch from '路径'
使用：
  const [value, setValue] = useState('')
  const [searchOpt, setSearchOpt] = useState([])
<Form form={form} name="dynamic_rule">
	<Form.Item
        {...formItemLayout}
        name="username"
        label="Name"
        rules={[
          {
            required: true,
            message: 'Please input your name',
          },
        ]}
      >
        <SelectSearch
        	value={searchVal}
	        setSearchOpt={searchOpt}
	        onChangeHandl={(value: any)=> {
	          setSearchVal(value)
	          form.setFieldsValue({equipmentCode: value})
	        }}
	        onSearch={(value: any) => {
	            setSearchVal(value) // 这个是进行select输入信息后进行回显的
	            form.setFieldsValue({equipmentCode: value}) // 这个是在失去焦点后，select框内的数据就会消失，value就是空，select框无数据，所以这个是通过form设置值的方法来解决这个问题
	        	// setSearchOpt(getSearchOption) 我的功能需求：用户在这里输入信息后，需要调接口进行进行获取Option内容的数据
	        }}
        />
      </Form.Item>
</Form>