antd 实现既可以输入又可以选择、搜索的组件

项目中的需求如下图，希望输入的信息是可以选择或者自定义输入的，并且选择的时候可以根据输入进行提示，antd中看了一遍，选择了AutoComplete组件（AutoComplete - Ant Design）

实现方式：

  <AutoComplete
    style={{ width: '100%' }} 
    placeholder={'xxxx'}
    onSelect={(value) => setId(`${value}`)} // 选择的id是唯一值
    onChange={() => setId('')} // 当输入改变的时候把id设置为空，用''判定他是输入的还是选择的
    onSearch={handleSearch} // 设置搜索value
  >
    {list.map((v) => ( // 信息列表
      <AutoComplete.Option key={v.id} value={v.id}>
       {v.name}
      </AutoComplete.Option>
    ))}
 </AutoComplete>

const [id, setId] = useState<string>(station.user?.id || ''); // 选择的id

const { userList } = props
const [searchValue, setSearchValue] = useState(''); // 搜索的value
const handleSearch = useCallback((value: string) => { // 获取搜索value
  setSearchValue(value);
}, []);

// list 是根据搜索值变化的，这样子就可以根据搜索改变列表了
const list = useMemo(() => {
  if (!searchValue) return userList;
  return userList.filter((item) => item.xxx.includes(searchValue));
}, [userList, searchValue]);

// 确定保存的时候根据需求去给接口传值
const okHandle = useCallback(() => {
  form.validateFields((err: any, fieldsValue: IFormField) => {
    if (err) return;
    form.resetFields();
    dispatch.xxxx.xxxx({
      ...fieldsValue,
      id: !id ? null : fieldsValue.id,
      userInfo: id ? null : fieldsValue.id,
     
    })
      .then(() => {
        message.success('xxxxxxxxx');
        onCancel();
      })
      .catch(() => {
        message.error('xxxxxxxx');
      });
  });
}, [form, id, dispatch, onCancel]);

有什么疑问可以留言，这个组件我第一次用，感悟不多，仅此记录以下