使用去抖动的 onChange 处理程序设置输入值

Posted 2023-02-21

【中文标题】使用去抖动的 onChange 处理程序设置输入值

【英文标题】：Set input value with a debounced onChange handler

【发布时间】：2020-04-09 00:04:37

【问题描述】：

在我的 React Hooks 应用程序中，我需要让用户在输入字段中输入 1000 毫秒。当 1000 毫秒到期时，将使用输入值发送 API 请求。

<input type='text' name='name' className='th-input-container__input' onChange=evt => testFunc2(evt.target.value) />

值设置在testFunc2(evt.target.value):

const testFunc2 = useCallback(debounce((text) => setNameFilter(text), 1000), []);

一旦将 nameFilter 设置为新值，useEffect 就会发出一个 API 请求，因为 nameFilter 是它的依赖项。 这样一来，API 仅使用生成的用户输入而不是每个击键值进行查询，但输入不受控制。当我使用value=nameFilter 将当前nameFilter 值添加到输入时，用户无法在输入中输入，并且输入仅接收最后输入的字符。

如何让用户输入的字符显示在输入中？

【问题讨论】：

只是好奇，你是自己写debounce函数还是用lodash的？

“just-debounce-it”提供的那个。

【参考方案1】：

更新答案：

const debouncedApiCall = useCallback(debounce((text) => 
  getRecordsForPage(1, text, '', '', '', '', 10, );
, 1000), [])

useEffect(() => 
  debouncedApiCall(nameFilter);
, [nameFilter, debouncedApiCall])

<input type='text' value=nameFilter onChange=evt => setNameFilter(evt.target.value) />

【讨论】：

以下是我对您的解决方案应用的更改，以使其产生所需的结果。请考虑将这些添加到解决方案中，以便我接受。 const debouncedApiCall = useCallback(debounce((text) => getRecordsForPage(1, text, '', '', '', '', 10, ), 1000), []);。 useEffect(() => debouncedApiCall(nameFilter); , [nameFilter, debouncedApiCall]);。 input 元素代码与您的解决方案中提供的一样。 getRecordsForPage是发送请求的API调用方法。

感谢您及时的解决方案。您错过了const debouncedApiCall 中useCallback 中的[] dep 数组。请添加它，以便代码看起来正确。

@ElAnonimo 抱歉，我有一段时间没有使用 React，故意错过了它。感谢您的指正。

请从getRecordsForPage 参数中删除, 1000。这是debounce 超时值。 getRecordsForPage 参数仅在第一个括号中列出。