搜索姓名添加防抖处理
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user