如何在 reactjs 中使用 debounce 清除输入值

Question

我在做搜索逻辑。而且我还使用 debounce 来避免发送过多的 API 请求。 我想重置输入值。但我不知道如何使用去抖清除输入值。帮助我。

import { useRef, useState } from "react";
import { debounce } from "lodash";
import "./styles.css";

export default function App() {
  const [text, setText] = useState("");

  const debounceOnChange = debounce((search) => {
    setText(search);
  }, 500);

  const onChangeInput = (event) => {
    const search = event.target.value;
    debounceOnChange(search);
  };

  const inputRef = useRef(null);

  const onClickReset = () => {
    setText("");
    // inputRef?.current?.value = "";
  };

  return (
    <div className="App">
      <input type="text" onChange={onChangeInput} ref={inputRef} />
      <button onClick={onClickReset}>reset</button>
      <br />
      {text}
    </div>
  );
}

这是我的codesandbox示例。 https://codesandbox.io/s/autumn-darkness-qsh9jf?file=/src/App.js

点击重置按钮时，输入的值应该被清除

Answer 1

我认为你不需要使用去抖动方法

为了大家更好的理解，我给大家做了一个代码沙箱的例子

看看这个 https://codesandbox.io/s/confident-bohr-vlgggj?file=/src/App.js:0-870