为自动完成 Ant Design 添加去抖动的示例

Question

我在这里需要一点帮助，我是新手，我有这个疑问。

我没有得到使用 debounce 自动完成的工作示例。即我的 AutoComplete 组件延迟显示输入的文本，当我为此搜索解决方案时，我知道我们可以通过使用带 debounce 的 AutoComplete 来克服这个问题。所以请任何人都可以通过向给定的沙箱 link 添加去抖动来帮助解决这个问题，或者可以向我建议为什么它在显示输入的文本时会延迟。谢谢。

参考：https://codesandbox.io/s/crazy-galois-5v1mi

Answer 1

使用 lodash 的 debounce 方法。

import debounce from 'lodash/debounce';

<AutoComplete
  ...,
  onSearch={debounce(handleSearch, 300)} // 300 is your required delay
/>

Answer 2

添加内联去抖通常会导致每次击键时触发。如果你想在用户完成击键后去抖，那么你需要使用 useCallback.

例子-

const debouncedSearch = useCallback(
    debounce(nextValue => onSearch(nextValue), 1000),
    [], // will be created only once initially
);

const handleSearch = event => {
    event.persist();
    const { value: nextValue } = event.target;
    // Even though handleSearch is created on each render and executed
    // it references the same debouncedSearch that was created initially
    debouncedSearch(nextValue);
};

<AutoComplete
  ...,
  onSearch={handleSearch}
/>

我发现这篇文章很有用，值得推荐阅读。 https://www.freecodecamp.org/news/debounce-and-throttle-in-react-with-hooks/

为自动完成 Ant Design 添加去抖动的示例

Example to add debounce to autocomplete Ant Design

lodash

reactjs

debounce

antd