使用 Typescript 响应 AsyncTypeahead

Question

我正在尝试使用 tsx 文件在 React 中使用模块 React Bootstrap Typeahead（original 和 type 版本）。

我正在使用以下版本：

"@types/react-bootstrap-typeahead": "3.4.5"
"react-bootstrap-typeahead": "3.4.3"

我构建了以下 SimpleAsyncExample 类，尝试通过无论用户键入什么内容始终返回相同的结果来测试组件，但响应有所延迟...

import * as React from 'react';
import {AsyncTypeahead, ClearButton, Token} from 'react-bootstrap-typeahead';

interface State {
  capital: string;
  name: string;
  population: number;
  region: string;
  setValue: (value: State) => void;
}

const options: State[] = [
  { name: 'Alabama', population: 4780127, capital: 'Montgomery', region: 'South', setValue: () => {} },
  { name: 'Alaska', population: 710249, capital: 'Juneau', region: 'West', setValue: () => {} },
  { name: 'Arizona', population: 6392307, capital: 'Phoenix', region: 'West', setValue: () => {} },
  { name: 'Arkansas', population: 2915958, capital: 'Little Rock', region: 'South', setValue: () => {} },
  { name: 'California', population: 37254503, capital: 'Sacramento', region: 'West', setValue: () => {} },
  { name: 'Colorado', population: 5029324, capital: 'Denver', region: 'West', setValue: () => {} },
];

type propTypes = {};
type defaultProps = {
  isLoading: boolean,
  options: State[]
};

export default class SimpleAsyncExample extends React.Component<propTypes, defaultProps> {

  state = {
    isLoading: false,
    options: []
  };

  render() {
    return (
      <div>
        <AsyncTypeahead
          {...this.state}
          id="typeahead"
          delay={800}
          emptyLabel="No se encontraron resultados"
          ignoreDiacritics={true}
          minLength={3}
          onSearch={this.onSearch}
          placeholder="Insert text to search"
          promptText="Searching"
          searchText="Searching"
          renderMenuItemChildren={(selectedItem: State, props) => {
            return <Token
              active
              disabled={false}
              tabIndex={5}
              href="https://test.com"
              onRemove={() => console.log(props.text)}>
              {selectedItem.name}<ClearButton onClick={() => {}} />
            </Token>;
          }}
        />
      </div>
    );
  }

  onSearch = (query: string) => {
    this.setState({isLoading: true});
    setTimeout(() => {
      this.setState({isLoading: false, options,});
    }, 2000);
  }
}

我还配置了（如文档中所示）css 导入...

import 'react-bootstrap-typeahead/css/Typeahead.css';
import 'react-bootstrap-typeahead/css/Typeahead-bs4.css';

此应用无法运行，不建议任何结果。

问题是，在测试或示例中，没有涉及 AsyncTypeahead 组件，我也没有找到任何示例，所以如果有人有解决方案，或者可能有另一个与 Bootstrap 4 和 React 一起使用的模块推荐（使用Typescript）或使用此库的工作示例将不胜感激。

Answer 1

您需要指定正确的labelKey 字段。默认情况下，该值为“标签”，但在您的情况下，选项中没有“标签”字段，因此过滤器失败。将labelKey 设置为“名称”可以解决问题：

<AsyncTypeahead
  {...this.state}
  id="typeahead"
  delay={800}
  emptyLabel="No se encontraron resultados"
  ignoreDiacritics={true}
  labelKey="name" // <---------- You're missing this
  minLength={3}
  onSearch={this.onSearch}
  placeholder="Insert text to search"
  promptText="Searching"
  searchText="Searching"
/>

请注意，输入文本仍然会过滤返回的结果，因此输入“cal”将显示“California”作为结果，但输入“sdfgsdfg”将返回一个空结果集。

最后，ClearButton 组件没有被库公开，因此当菜单项呈现时您会看到语法错误。