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>
|
||
</>
|
||
} |