我有一个在 React Native 中使用文本输入的搜索功能,但是搜索需要调用一个 API,所以我想在用户完成输入 2 秒时保持 onChangeText 运行,

我尝试使用 setIntervalsetTimeout 但这些都不起作用,

这是我试过的代码:

<TextInput
  placeholder="search"
  onChangeText={(text) => {
    setTimeout(() => {
      console.log(text)
      console.log("Kepanggil TimeOUTNYAA")
      params.onSearchText(text)
    }, 2000);
  }
}

//function onSearchText

onSearchText(searchText){
  this.setState({text:searchText},()=>{
    this._loadMore() // here's a function to call the API
  })
}

实际行为:

当我在 am 中输入 TextInput 时,日志显示我:

javascript - React Native - 如何在执行函数之前处理 TextInput onChangeText 事件以等待?-LMLPHP

预期行为:

我希望日志只显示 am 而不是 aam
有可能做到吗?

最佳答案

您应该在设置新超时之前清除旧超时

<TextInput
    placeholder="search"
    onChangeText={(text) => {
        if(this.searchWaiting)
            clearTimeout(this.searchWaiting);
        this.searchWaiting = setTimeout(() => {
            this.searchWaiting = null;
            console.log(text);
            console.log("Kepanggil TimeOUTNYAA")
            params.onSearchText(text)
        }, 2000);
    }}
/>

关于javascript - React Native - 如何在执行函数之前处理 TextInput onChangeText 事件以等待?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51131228/

10-13 00:21