42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
|
import { Button, Form, Input } from 'antd';
|
|||
|
|
import { useCodeManageContext } from './CodeManageContext';
|
|||
|
|
import { ChangeEvent, useRef } from 'react';
|
|||
|
|
|
|||
|
|
export default function CodeManageSearchBase() {
|
|||
|
|
const { setCurrentPage, searchRefetch, setSearchKeyword } = useCodeManageContext();
|
|||
|
|
const debounceTimer = useRef<NodeJS.Timeout | null>(null);
|
|||
|
|
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-10 w-2/3 mx-auto">
|
|||
|
|
<Form>
|
|||
|
|
<Form.Item name="search" label="关键字搜索">
|
|||
|
|
<Input.Search
|
|||
|
|
placeholder="输入分享码或文件名"
|
|||
|
|
enterButton
|
|||
|
|
onSearch={onSearch}
|
|||
|
|
onChange={onChange}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
}
|