当使用 <AsyncTypeahead/> 我不能同时使用 onSearch 和 onInputChange答案

【问题标题】：When using <AsyncTypeahead/> I can't use onSearch and onInputChange at the same time当使用 <AsyncTypeahead/> 我不能同时使用 onSearch 和 onInputChange
【发布时间】：2021-08-27 11:12:32
【问题描述】：

所以正如我在标题中所说，我不能同时使用 onSearch 和 onInputChange。如果我尝试，onSearch 会被忽略。你能告诉我为什么或者有替代 onInputChange 的方法吗？我在表单中使用 AsyncTypeahead，因此单击按钮时需要这些值。

const [from, setFrom] = useState('');
const onSearchStart = (query) => {
  setTypeAhead({
    ...typeAhead,
    startIsLoading: true
   })
   setFrom(query)
   getStations(query).then(r => {
   setTypeAhead({
     ...typeAhead,
     startIsLoading: false,
     startOptions: r || []
   })
 })
}

return(
  <AsyncTypeahead
    id={"from"}
    isLoading={typeAhead.startIsLoading}
    options={typeAhead.startOptions}
    onInputChange={setFrom}
    onSearch={onSearchStart}
  />  
)

这不是完整的代码，但它显示了导致错误的所有内容

【问题讨论】：

问题是你的onInputChange 调用了setFrom，它会更新状态并导致组件重新渲染。重新渲染会使onSearch 函数短路，该函数已被去抖动。根据您需要onInputChange 的原因，您可以尝试将setFrom 移动到onSearch 函数中。
我有完全相同的问题，我希望能够输入搜索词，如果找不到，则使用输入字段中的值，我使用与上述问题类似的设置但我正在努力让它按照我需要的方式工作
在反复阅读上面的代码和@ericgio 评论后，我得到了它的工作，没有必要使用onInputChange 来跟踪输入的内容，而是使用搜索词来这样做，所以在 onSearch 方法中使用状态设置器
@RicardoSanchez 你是如何让它工作的？仅当字符串超过最小长度（默认为 2）时才会触发 onSearch。这意味着在输入字段中键入的前 2 个字符不会触发 setState。我的解决方法是使用useRef()，但我很好奇是否有人找到了其他解决方案

标签： react-bootstrap-typeahead

【解决方案1】：

作为一种解决方法，您可以使用useRef 来不触发重新渲染。代码如下：

const fromRef = useRef('');
const onSearchStart = (query) => {
  ...
}

return(
  <AsyncTypeahead
    ...
    onInputChange={(text) => {
      fromRef.current = text;
    }}
    onSearch={onSearchStart}
  />  
)

【讨论】：