React搜索框组件

whuhewei2026-05-16 10:16

题目要求

实现一个search input组件，用户输入任意内容后自动触发关键词api搜索需求：搜索不频繁触发，结果响应及时

解答

下面仅给出React中防抖的实现，竞态请求的问题可以使用AbortController。

javascript 复制代码

import { useState, useRef, useCallback, useEffect } from "react";

const fetchApi = (input) => {
  console.log(`fetch ${input}...`);
};

const useDebounce = function (fun, timeout) {
  const timerRef = useRef(null);
  const funRef = useRef(fun);
  funRef.current = fun;

  return useCallback(
    function (...args) {
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => {
        funRef.current.apply(this, args);
      }, timeout);
    },
    [timeout]
  );
};

export default function SearchInput() {
  const [value, setValue] = useState("");

  const search = useDebounce(fetchApi, 1000);

  const handleChange = (e) => {
    setValue(e.target.value);
    search(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

codesandbox链接：https://codesandbox.io/p/sandbox/ftgm5k