Question

我有来自react-native-elements组件的SearchBar在过滤数据时运行良好，但是一旦它为每个键入的字母调用搜索方法，它就不具有表现性。

我的意思是，如果我键入TEST，它将显示“T”结果，然后显示“TE”结果，然后显示“TES”结果，最后显示“TEST”结果，一次显示。

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

问题： 那么，有没有办法在键入完成后只调用一次方法？

SearchBar组件：

<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);

        });
    }

Answer 1

您可以延迟调用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);
}

SearchBar为每个字母

1 个答案: