使用类型记录响应AsyncTypeahead

Question

我正在尝试使用模块React Typeahead (原创和类型版本)来使用tsx文件。

我正在使用以下版本：

"@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组件，而我没有找到任何示例，因此，如果有人有解决方案，或者可能有另一个模块建议使用引导带4并使用类型记录(使用类型记录)，或者使用此库的工作示例，我们将非常感谢。

Answer 1

您需要指定正确的labelKey字段。默认情况下，该值为"label“，但在您的示例中，选项中没有"label”字段，因此筛选失败。将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组件，因此在菜单项呈现时会看到语法错误。