从反应引导程序 AsyncTypeHead 中获取选定的值答案

【问题标题】：Get selected value from react bootstrap AsyncTypeHead从反应引导程序 AsyncTypeHead 中获取选定的值
【发布时间】：2023-02-10 02:26:06
【问题描述】：

我正在使用反应引导程序AsyncTypeHead。我键入关键字，它会从后端建议值，然后我单击其中一个建议并尝试选择该值，但事件似乎不存在。它会抛出各种错误。可能是什么问题？我正在尝试通过 onChange 属性和 event.target.value 来做到这一点：

<AsyncTypeahead
  filterBy={filterBy}
  id="async-example"
  isLoading={isLoading}
  labelKey="login"
  minLength={3}
  onSearch={handleSearch}
  onChange={ (event) => setCitiesSend([...citiesSend, event.target.value])}

如果不是 event.target.value 我输入 alert('test') 它会多次抛出警报。它似乎在每个键入的字母上都在变化。

完整示例：React Bootstrap Typeahead - Asynchronous Searching

【问题讨论】：

标签： javascript reactjs react-bootstrap typehead

【解决方案1】：

onChange 函数返回一个值。所以，你的代码将是。

<AsyncTypeahead
   filterBy={filterBy}
   id="async-example"
   isLoading={isLoading}
   labelKey="login"
   minLength={3}
   onSearch={handleSearch}
   onChange={ (value) => setCitiesSend((previous) =>[...previous, ...value])}
/>

【讨论】：