React Bootstrap AsyncTypeahead onChange事件取值异常求助

第一个问题：onChange用event.target.value报错 #

React Bootstrap Typeahead（包括AsyncTypeahead）的onChange回调第一个参数不是DOM事件，而是当前选中项的数组（组件默认支持多选）。你写的event.target.value自然会报错，因为根本没有这个event参数。

改法很简单，直接用选中项数组：

<AsyncTypeahead
  filterBy={filterBy}
  id="async-example"
  isLoading={isLoading}
  labelKey="login"
  minLength={3}
  onSearch={handleSearch}
  onChange={(selected) => {
    // 单选场景取数组第一个元素
    if (selected.length > 0) {
      // 这里的login对应你设置的labelKey，按实际数据结构调整字段名
      setCitiesSend([...citiesSend, selected[0].login]);
    }
  }}
/>

要是你只需要单选，给组件加singleSelect属性即可：

<AsyncTypeahead
  // 其他属性不变
  singleSelect
/>

第二个问题：alert('test')触发多次弹窗 #

输入字符时就弹alert，说明你搞混了onChange和onSearch的触发时机：

• onSearch：用户输入满足minLength条件后触发，用来调用后端接口获取选项
• onChange：只有用户点击选中/取消选项时才会触发

如果输入时就触发弹窗，肯定是逻辑放错了地方。把输入时的处理移去onSearch，选中后的操作留在onChange。另外检查handleSearch函数里有没有不小心修改了组件的选中状态，导致onChange被误触发。

内容的提问来源于stack exchange，提问作者Tomas Am