代码之家  ›  专栏  ›  技术社区  ›  Taylon Assis

SearchBar为每个字母调用一个方法

  •  0
  • Taylon Assis  · 技术社区  · 6 年前

    我有来自react native elements组件的SearchBar,可以很好地过滤数据,但一旦它为每个键入的字母调用了搜索方法,它就不起作用了。

    我的意思是,如果我进行类型测试,它将显示“T”结果,然后显示“TE”结果,然后显示“TES”结果,最后显示“TEST”结果,一次显示一个。

    我不打算使用提交按钮。官方文档仅显示onChangeText以触发某些方法。

    问题: 那么,有没有一种方法可以在完成键入时只调用该方法一次?

    搜索栏组件:

    <SearchBar 
      onChangeText={(text) => this.search(text) }
      onClear={this.setState({noMatches: true})}
      showLoadingIcon={this.state.searching}
    />
    

    搜索方法:

     search = (text) => {
    
            requestMonitorados(text).then((value) => {
    
                    setTimeout(() => {
                        this.setState(data: value); //Updating list of data
                   }, 3000);
    
            });
        }
    
    1 回复  |  直到 6 年前
        1
  •  5
  •   Roy Wang    6 年前

    您可以延迟呼叫 this.search 在一段时间内未检测到新的钥匙输入之前:

    onChangeText={(text) => {
      this.text = text;
      clearTimeout(this.timeout); // clears the old timer
      this.timeout = setTimeout(() => this.search(this.text), WAIT_TIME);
    }}
    
    componentWillUnmount() {
      clearTimeout(this.timeout);
    }