React Bootstrap Typeahead getInstance() 不是函数

问题描述

我有两个 AsyncTypeahead 实例在一个组件中由一个单独的类呈现。

为了保持模糊功能绑定到正确的字段，我使用了 .getInstance()。

所以在我的构造函数中我使用：

   this.typeahead = React.createRef();

那么我的typahead道具如下：

 <AsyncTypeahead
    id="field1"
    allowNew={false}
    defaultSelected={defaultSelected}
    disabled={false}
    filterBy={(option,props) =>  true}
    inputProps={{
    id: id,tabIndex: -1
    }}
    isInvalid={isInError}
    isLoading={isLoading}
    useCache={false}
    labelKey="value"
    minLength={2}
    multiple={multiple}
    onBlur={this.onBlur}
    onChange={onChange}
    onFocus={onFocus}
    onSearch={this.handleSearch}
    options={options}
    placeholder="Field 1 *"
    ref={this.typeahead}
    required={required}
    value={value}
   />


 <AsyncTypeahead
    id="field2"
    allowNew={false}
    defaultSelected={defaultSelected}
    disabled={false}
    filterBy={(option,tabIndex: -1
    }}
    isInvalid={isInError}
    isLoading={isLoading}
    useCache={false}
    labelKey="value"
    minLength={2}
    multiple={multiple}
    onBlur={this.onBlur}
    onChange={onChange}
    onFocus={onFocus}
    onSearch={this.handleSearch}
    options={options}
    placeholder="Field 2 *"
    ref={this.typeahead}
    required={required}
    value={value}
   />

我的 onBlur 函数如下：

 onBlur = () => {
    const instance = this.typeahead.getInstance();
 }

当我用 Tab 键退出/模糊我的输入字段时，我收到以下控制台错误：

TypeError: n.typeahead.getInstance is not a function

我可以成功使用以下 (this.typeahead.current)，但随后我的下拉列表中的选项混淆了（页面上有两个 AsyncTypeahead）。

const instance = this.typeahead.current;

在我的反应开发工具中，使用 current 似乎是指正确的 DOM 元素，但下拉列表中显示的选项是最后模糊的。

因此，如果我从字段 A 中选择一个选项，然后从字段 B 中选择一个选项，一旦我单击回字段 A，它会在自动填充中显示字段 B 中的选项。

我想不出还能尝试什么。

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）