68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import { Button, Form, Input } from 'antd';
|
||
import { useCodeManageContext } from '../CodeManageContext';
|
||
import { ChangeEvent, useEffect, useRef } from 'react';
|
||
import { useSearchParams } from "react-router-dom";
|
||
|
||
export default function CodeManageSearchBase({ keyword }: { keyword?: string }) {
|
||
const { setCurrentPage, searchRefetch, setSearchKeyword, searchKeyword } = useCodeManageContext();
|
||
const debounceTimer = useRef<NodeJS.Timeout | null>(null);
|
||
const formRef = Form.useForm()[0]; // 获取表单实例
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
|
||
// 当 keyword 属性变化时更新表单值
|
||
useEffect(() => {
|
||
if (keyword) {
|
||
formRef.setFieldsValue({ search: keyword });
|
||
}
|
||
}, [keyword, formRef]);
|
||
|
||
// 监听 searchKeyword 变化，如果 URL 参数中有 keyword 且 searchKeyword 发生变化，则清空 URL 参数
|
||
useEffect(() => {
|
||
const urlKeyword = searchParams.get('keyword');
|
||
if (urlKeyword && searchKeyword !== urlKeyword) {
|
||
// 创建一个新的 URLSearchParams 对象，不包含 keyword 参数
|
||
const newParams = new URLSearchParams(searchParams);
|
||
newParams.delete('keyword');
|
||
setSearchParams(newParams);
|
||
}
|
||
}, [searchKeyword, searchParams, setSearchParams]);
|
||
|
||
const onSearch = (value: string) => {
|
||
console.log(value);
|
||
setSearchKeyword(value);
|
||
setCurrentPage(1)
|
||
searchRefetch()
|
||
};
|
||
|
||
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
// 设置表单值
|
||
setSearchKeyword(e.target.value);
|
||
// 设置页码为1，确保从第一页开始显示搜索结果
|
||
setCurrentPage(1);
|
||
// 使用防抖处理，避免频繁发送请求
|
||
if (debounceTimer.current) {
|
||
clearTimeout(debounceTimer.current);
|
||
}
|
||
debounceTimer.current = setTimeout(() => {
|
||
// 触发查询
|
||
searchRefetch();
|
||
}, 300); // 300毫秒的防抖延迟
|
||
};
|
||
|
||
return <>
|
||
<div className="py-4 mt-2 w-2/3 mx-auto">
|
||
<Form form={formRef}>
|
||
<Form.Item name="search" label="关键字搜索">
|
||
<Input.Search
|
||
placeholder="输入分享码、文件名或用户IP"
|
||
enterButton
|
||
value={searchKeyword}
|
||
allowClear
|
||
onSearch={onSearch}
|
||
onChange={onChange}
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
</>
|
||
} |