0

我有两个 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, 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 2 *"
    ref={this.typeahead}
    required={required}
    value={value}
   />

我的 onBlur 函数如下：

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

当我标记/模糊我的输入字段时，我收到以下控制台错误：

TypeError: n.typeahead.getInstance is not a function

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

const instance = this.typeahead.current;

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

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

我想不出还有什么可以尝试的。

谢谢

4

0 回答 0