React中AsyncTypeAhead组件onChange方法无法获取evt事件对象怎么办

• 你当前声明的onChange箭头函数只接收了第一个参数s（组件返回的选中值），组件触发回调时传递的第二个事件参数没有被捕获，函数内引用的evt属于未定义变量，因此取值为undefined。

方法1：捕获回调传递的事件参数 #

主流开源AsyncTypeAhead组件（如react-bootstrap-typeahead）的onChange回调默认按顺序传递两个参数：第一个为选中值，第二个为原生事件对象，你只需要在箭头函数形参中补上evt即可：

onChange={(s, evt) => handleOnChange(s, evt)}

方法2：适配二次封装的组件 #

如果使用的是业务二次封装的AsyncTypeAhead，onChange没有透传事件对象，可以额外绑定其他事件来获取：

<AsyncTypeAhead
  onChange={(s) => handleOnChange(s)}
  // 绑定点击事件获取事件对象
  onClick={(evt) => handleClickEvent(evt)}
  // 或者绑定输入变更事件获取
  onInputChange={(value, evt) => handleInputEvent(value, evt)}
/>

若修改后仍无法获取evt，可核对所用组件的官方文档，确认其onChange回调是否支持透传原始事件对象。

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