搜索姓名添加防抖处理

This commit is contained in:
xianyi
2025-12-23 11:53:26 +08:00
parent ed6f52936a
commit c3ef051de6

View File

@@ -39,6 +39,9 @@ export const ExamSection = ({
const [displayCount, setDisplayCount] = useState(INITIAL_LOAD_COUNT);
const observerTarget = useRef<HTMLDivElement>(null);
const [isLoadingMore, setIsLoadingMore] = useState(false);
// 防抖:内部输入值
const [debouncedInputValue, setDebouncedInputValue] = useState(searchValue);
const debounceTimerRef = useRef<number | null>(null);
useEffect(() => {
getTodayExamProgress({})
@@ -56,6 +59,31 @@ export const ExamSection = ({
});
}, []);
// 防抖:当输入值变化时,延迟 0.5 秒后调用 onSearchChange
useEffect(() => {
if (debounceTimerRef.current) {
window.clearTimeout(debounceTimerRef.current);
}
debounceTimerRef.current = window.setTimeout(() => {
onSearchChange(debouncedInputValue);
}, 500);
return () => {
if (debounceTimerRef.current) {
window.clearTimeout(debounceTimerRef.current);
}
};
}, [debouncedInputValue, onSearchChange]);
// 当外部 searchValue 变化时(比如清空搜索),同步内部值(仅在值确实不同时更新)
useEffect(() => {
if (searchValue !== debouncedInputValue && searchValue === '') {
// 只在外部清空搜索时同步,避免用户输入时被覆盖
setDebouncedInputValue('');
}
}, [searchValue]);
// 当 filteredClients 变化时,重置显示数量
useEffect(() => {
setDisplayCount(INITIAL_LOAD_COUNT);
@@ -114,8 +142,8 @@ export const ExamSection = ({
<div className='w-[320px]'>
<Input
placeholder='搜索 姓名 / 手机号 / 身份证号 / 卡号'
value={searchValue}
onChange={(e) => onSearchChange(e.target.value)}
value={debouncedInputValue}
onChange={(e) => setDebouncedInputValue(e.target.value)}
className='text-sm'
/>
</div>