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

Posted 2023-04-18

【中文标题】React Native - 如何处理 TextInput onChangeText 事件在执行函数之前等待？

【英文标题】：React Native - How to handle TextInput onChangeText event to wait before execute function?

【发布时间】：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

有可能吗？

【参考方案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 的值的点，在这种情况下这是不可能的。