由于获取获取选项列表的接口对返回数据的长度加了限制，所以有了在搜索下拉框添加搜索功能的需求，这里记录一下封装搜索组件的过程。

下拉框组件：

import { getProductList } from "@/services/product";
import { Select } from "antd";
import _ from "lodash";
import { useState } from "react";
import { useQuery } from "react-query";

type Props = {
  value?: number;
  onChange?: (value: number) => void;
};

export default function SearchProduct({ value, onChange }: Props) {
  const [productName, setProductName] = useState(""); // 产品列表
  // 获取物品列表
  const { data: productOptions } = useQuery({
    queryKey: [getProductList.name, productName],
    queryFn: async () => {
      const data = await getProductList({ productName });
      const res = _.map(data?.list, (item) => ({ value: item.id, label: item.productName }));
      return res;
    },
  });

  // 搜索物品
  const searchProduct = _.debounce((value) => {
    setProductName(value);
  }, 300);
  return (
    <Select
      showSearch
      placeholder="请选择物品"
      options={productOptions}
      onSearch={searchProduct}
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onChange={onChange}
      value={value}
    />
  );
}

使用：

<Form labelCol={{ span: 4 }} form={form} onFinish={onSubmit}>
  <Form.Item label="物品" name="productId">
    <SearchProduct />
  </Form.Item>
</Form>

需要注意的是，form-item的子组件会默认携带上value和onChange事件，所以直接自定义组件控制好这两个属性就可以实现对外层form的双向数据绑定。