无法使用带有多个选项和renderInput的AsyncTypeahead查看结果

如何解决无法使用带有多个选项和renderInput的AsyncTypeahead查看结果

我正在尝试在设置了multiple选项的Typeahead上使用自定义输入组件。我在文档中看到它说“正确处理了引用”，但是我没有看到有关此操作的示例。我不确定要传入referenceElementRef的内容。到目前为止，我尝试过的所有操作都不会在我键入时呈现选项。我在DOM中看到了它们，但是opacity中的.rbt-menu设置为0，因此它们基本上是隐藏的。

到目前为止，这是我的代码：

const divRef = React.useRef(null);
  return (
    <Col>
      <div ref={divRef}>
        <span className="uppercase">
          <FormattedMessage id="d.customer" defaultMessage="Customer" tagName="h4" />
        </span>
        <AsyncTypeahead
          multiple
          id="customer-filter-input"
          inputProps={{
            'aria-label': 'Customer search',style: { fontSize: '14px' },}}
          key={'customer-input'}
          minLength={4}
          isLoading={props.isLoadingcustomeRSSuggestions}
          delay={300}
          onSearch={(term: string) => handleFilterInputs(term,'customers')}
          size={'lg'}
          options={dataSource}
          labelKey={'defaultMessage'}
          placeholder={intl.formatMessage({
            id: 'companyName',defaultMessage: 'Company name',})}
          onChange={(filterItem: any) => handleAutocompleteUpdate(filterItem,'customer')}

          renderInput={({ inputRef,referenceElementRef,...inputProps }: any) => (
            <Input
              {...inputProps}
              style={{ position: 'relative' }}
              ref={(input: any) => {
                inputRef(input);
                referenceElementRef(divRef); // What do I put here?
              }}
            />
          )}
        />
      </div>

    </Col>
  );

这是我输入Typeahead并获得结果后在DOM中呈现的内容：

使用倍数和renderInput的Typeahead的任何想法或可行示例吗？

编辑： 这是我所看到的codesandBox。我还看到，当未设置multiple时，也会发生此问题。使用renderInput似乎是一个问题。是否需要我也使用renderMenu？

https://codesandbox.io/s/react-bootstrap-typeahead-async-pagination-example-forked-3kz3z

解决方法

如果您将沙箱中的预输入版本升级到最新版本（v5.1.1），并将input元素传递给referenceElementRef，它将起作用（请注意，您需要在输入以显示菜单）：

// v5.0 or later
renderInput={({ inputRef,referenceElementRef,...inputProps }) => (
  <Input
    {...inputProps}
    ref={(input) => {
      inputRef(input);
      referenceElementRef(input);
    }}
  />
)}

通过referenceElementRef相对于react-popper节点呈现菜单。在大多数情况下，参考节点将是输入本身。同时存在inputRef和referenceElementRef的原因是在更复杂的情况下（例如多选），其中需要相对于输入周围的容器元素呈现菜单。

如果使用组件的v4，则方法类似，但使用的引用简称为ref：

// v4
renderInput={({ inputRef,ref,...inputProps }) => (
  <Input
    {...inputProps}
    ref={(input) => {
      inputRef(input);
      ref(input);
    }}
  />
)}