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 ...（如文档所示）

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组件，因此在呈现菜单项时您会看到语法错误。

使用Typescript反应AsyncTypeahead

1 个答案: