在react中对input做防抖

在 React 中对 input 做防抖可以通过使用 useCallback 和 useRef 配合实现。

首先，通过 useRef 来创建一个变量来存储 input 的值，然后使用 useCallback 来创建一个防抖函数，最后将防抖函数作为 onChange 事件的回调函数传递给 input。

以下是一个示例代码：

import React, { useCallback, useRef } from 'react';

function DebouncedInput() {
  const timerRef = useRef(null);
  const inputRef = useRef(null);

  const handleInputChange = useCallback(() => {
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      console.log(inputRef.current.value);
    }, 500);
  }, []);

  return (
    <input type="text" ref={inputRef} onChange={handleInputChange} />
  );
}

export default DebouncedInput;

在这个示例中，我们通过 useRef 来创建了两个变量，一个用于存储计时器的引用，另一个用于存储 input 的引用。

然后，我们使用 useCallback 来创建了一个防抖函数 `handleInputChange`，它在 input 值发生变化时被调用。

在 `handleInputChange` 函数中，我们使用 clearTimeout 来清除之前的计时器，然后创建一个新的计时器，延迟 500 毫秒后执行回调函数。在回调函数中，我们可以获取到当前 input 的值，并进行相应的处理。

最后，我们将防抖函数作为 onChange 事件的回调函数传递给 input，这样每次 input 的值发生变化时，都会触发防抖函数。