React Native - 如何处理 TextInput onChangeText 事件在执行函数之前等待？答案

【问题标题】：React Native - How to handle TextInput onChangeText event to wait before execute function?React Native - 如何处理 TextInput onChangeText 事件在执行函数之前等待？
【发布时间】：2018-12-10 09:21:11
【问题描述】：

我在 React native 中有一个使用 Text Input 的搜索功能，但是搜索需要调用 API，所以我想在用户完成输入 2 秒后保持 onChangeText 运行，

我尝试过使用setInterval 或setTimeout，但这些都不起作用，

这是我尝试过的代码：

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

实际行为：

当我在 TextInput 中输入 am 时，日志显示我：

预期行为：

我希望日志显示仅 am 不 a 和am

有可能吗？

【问题讨论】：

标签： javascript react-native textinput

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您根本不能将setTimeOut 或任何类型的代码放在onChangeText 上。它的回调函数意味着在事件触发后您收到一些在您的场景中无用的text（bcz 事件被触发并且API在onSearchText 中调用）。

你可以做的是在你的onSearchText函数中你可以有条件地返回text，如果文本长度大于2或3，那么只调用API。像这样：

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

【讨论】：

但是如果我把setTimeout 放在onSearchText 函数本身里面呢？我的问题是当我不持有 API 函数时：当我输入另一个文本并且函数尚未完成时，函数将再次运行（因为异步）
ohh.. 我认为它不可能 bcz 它的 onChangeText 事件的基本功能:)
如果有帮助，请将此答案标记为已完成 :)
这在这种情况下不起作用，因为当您尝试返回文本时它会引发错误。发生这种情况是因为 react native 的渲染问题。因此，我认为您错过了必须首先保存来自 textInput 的值的点，在这种情况下这是不可能的。