使用取消公告的onChange处理程序设置输入值

Question

在我的React Hooks应用程序中，我需要让用户键入输入字段1000毫秒。当1000ms过期时，将发送带有输入值的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), []);

一旦nameffilter设置为新值useffect就会发出API请求，因为nameffilter是它的依赖项。通过这种方式，只使用结果用户输入而不是每个键击值来查询API，但输入保持不受控制。当我使用value={nameFilter}将当前nameFilter值添加到输入时，用户无法在输入中键入，并且输入只接收最后键入的字符。

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

Answer 1

最新答复：

js prettyprint-override">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)} />