Ant Design 在多层弹窗中使用下拉菜单组件选择框层级出现问题，解决方案。

```tsx
<DatePicker getPopupContainer={(node) => node.parentNode} />
```

`getPopupContainer={(node) => node.parentNode} `这段代码的意义就是让选择器的层级基于当前父节点。


处理在多层弹窗中下拉菜单组件产生的层级问题（Ant Design）

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

下拉框组件：

```tsx
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}
    />
  );
}
```

使用：

```tsx

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

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


基于 ant design 封装一个可搜索的select组件

Git 切换分支推送，但是当前分支有内容，提示签出或存储。

解决方法：

1. 先把当前更改的代码全部“暂存”
2. 然后点vs code上面的三个...，选择“存储”，然后给存储的内容一个名字
3. 然后就可以正常切换分支推代码
4. 等一切操作结束后，返回当前分支
5. 在刚才的“存储”菜单，选择“应用最新存储”或者“弹出最新存储”
6. 刚才暂存的代码就回来了，“应用最新存储”和“弹出最新存储”的区别在于，应用会保留这个存储记录，弹出不会保存，这个可以根据个人习惯来决定。


处理在多层弹窗中下拉菜单组件产生的层级问题（Ant Design）

目录