Question

我正在尝试在视图中实现简单搜索。

我有一个TextInput组件，用户可以在其中键入搜索词。

TextInput由一个等待2秒的函数处理，然后将文本术语发送到api。

这是处理程序功能的api：

performSearch(text){
    var typingTimer = null;

    if(typingTimer){
      typingTimer = null;
    }
    typingTimer = setTimeout( () => {
      this.setState({
        search: text
      });
      console.log(this.state.search);
    }, 2000);
  }

以下是我希望拥有的行为：如果用户输入内容，则api调用仅在用户点击最后一个键后2秒进行。如果用户在2秒之前点击另一个键，则只能发送TextInput的最后一个值。

不幸的是我现在可以实现它。任何帮助将受到高度赞赏。干杯

Answer 1

试试这个：

performSearch(text){
    clearTimeout(this.typingTimer);// this will cancel the previous timer

    this.typingTimer = setTimeout( () => {
      this.setState({
        search: text
      });
    }, 2000);
  }

在reactnative中实现简单搜索

1 个答案: