react项目中使用antd Select实现既可以输入又可以下拉选择

需求

当输入关键词时，远程搜索内容，有返回则下拉展示，无返回也要展示当前输入的关键词(不能失去焦点后输入框就置空了)，然后点击查询就会根据输入框中的值查询相关列表信息

代码如下：

const [unitName, setUnitName] = useState();
const [unitNameKey, setUnitNameKey] = useState();


<Form.Item name="unitName" label="单位名称">
  <Select
      className="unitName"
      value={unitName}
      allowClear={true}
      filterOption={false}
      onSearch={val => {
          if (val) setUnitNameKey(val)
          fetchDataList(val) // 调接口搜索的方法
      }}
      onInputKeyDown={(e) => {
          e.key === 'Enter' && e.stopPropagation();
      }}
      showSearch
      style={{
          width: '100%',
      }}
      options={list} // list为搜索后的下拉项列表
      onBlur={(e) => {
          let inputValue = unitNameKey;
          // 当是选中值的时候，就没有e.target.value，所以需要通过原生获取节点的值
          if (!inputValue) {
              inputValue = form.getFieldValue('unitName');
          }
          setUnitName(inputValue)
          // 绑定值到表单上
          form.setFieldsValue({ unitName: inputValue })
      }}
      onChange={(val) => {
          setUnitNameKey()
      }}
  />
</Form.Item>