在React中，有什么方法可以仅在有人停止输入时才提交搜索请求？

如何解决在React中，有什么方法可以仅在有人停止输入时才提交搜索请求？

我正在使用React 16.13.0。我有这个搜索框，人们可以在其中输入文字，并希望在输入文字时看到结果...

return (
  <div className="searchForm">
    <input
      type="text"
      placeholder="Search"
      value={this.state.searchTerm}
      onChange={this.handleChange}
    />

我使用以下功能来处理检索结果，当人们键入...

  handleChange(event) {
    const query = event.target.value;
    if (!query) {
      this.setState({ searchTerm: query,searchResults: [] });
    } else {
      this.setState({ searchTerm: query,loading: true },() => {
        this.doSearch(query);
      });
    }
  }

  doSearch = (query) => {
    const searchUrl = "/coops/?contains=" + encodeURIComponent(query);
    fetch(searchUrl,{
      method: "GET",})
      .then((response) => response.json())
      .then((data) => {
        if (query === this.state.searchTerm) {
          this.setState({
            searchResults: data,loading: false,});
        }
      });
  };

我正在努力减少正在进行/处理的网络呼叫的数量。如果有人以相当快的方式键入“ res”之类的字符串，那么他们可能不在乎“ r”或“ re”的结果，所以我想知道，如果有新的我的搜索框中输入了字母？还是仅在有人停止输入至少100毫秒（不确定时间是否足够，但决定选择任意量）时才执行搜索？

解决方法

您追求的目标通常称为反跳。有许多实现此功能的库，包括。 lodash和下划线。例如，在Spring Boot doc中，您将执行以下操作：

      onChange={e => debouncedHandler(e,this.handleChange)}

并定义了组件的以下外部：

const debouncedHandler = _.debounced((e,handler) => handler(e),100);

在组件本身内部声明反跳功能是一个常见的陷阱。这将无效，因为react会在每次更改时重新运行该代码，因此会重新创建去抖动的功能，因此不会发生抖动。因此，重要的是在组件外部定义反跳功能。

更新：我之前的代码有错误。我认为现在已解决。我还没有测试过。

您可以通过setTimeout延迟搜索。只要捕获到新输入，就清除超时。如果计时器到期，请执行请求

handleChange = (e) => {
    this.setState(
        {
            searchTerm: e.target.value
        },() => {
            try {
                clearInterval(window.xhrSearchTimer);
            } catch (e) {
                console.log(`no timeout initialized`);
            }

            window.xhrSearchTimer = window.setTimeout(() => {
                this.doSearch(this.state.searchTerm);
            },1000); // arbitrary value
        }
    );
};

doSearch = () => {
    alert(`Now searching for ${this.state.searchTerm}`);
};

https://codesandbox.io/s/loving-sid-hb0nr?file=/src/App.js:139-622

您可以使用类似这样的帮助程序，并将调用函数作为第一个参数callback传递。

function getDoneTyping (callback,wait = 300) {
  let timer
  const keyDownHandler = event => {
    if (event.key === 'Enter') {
      callback()
    }
    clearTimeout(timer)
  }

  const keyUpHandler = event => {
    clearTimeout(timer)
    timer = setTimeout(callback,wait)
  }
  return { keyDownHandler,keyUpHandler }
}